python 哈姆雷特 哈姆雷特之 React

2021-10-11 12:49:33 字數 1800 閱讀 2116

最近兩三周在主要在寫 react,在這裡寫一下,算是個總結。

webpack

我們的後端語言用的是 go, 對於寫**來說,go 並沒有好的前端資源(js, css,image)的管理方式(打包,壓縮),另外我們也沒有用任務的框架,簡單粗暴的 go http server + package 的方式來實現的,所以也只能借用 js 的. 開始的時候其實我們用的是 gulp, 因為只需要打包、壓縮生成 manifest 就可以了,它的使用也簡單(也是當時對 webpack 的理解不夠)。但是打算換成 reactjs,它是推薦用 browserify 或 webpack,就這樣決定把之前的 gulp 換成了 webpack。這裡面主要的問題是作用域。這裡強烈建議看一下 ryfeng 的一篇文章resource2,關於 commonjs 的,因為 webpack 也是基於它的,理解很重要。關於 amd 的因為沒有實踐,就不多說了。總之也並沒有那麼難。

component 生命週期

略,其實很重要,主要是因為資料說得很詳細,這裡只把位址放在這裡,生命週期

jsxreact 裡非常重要的一部分是 jsx,雖然你可以用 js 來代替,我相信大多數人不會這樣做。所以很有必要說一下。

var dropdown =

a dropdown list

do something

do something fun!

do something else

render(dropdown);

這是我剛開始的 reactjs 的寫法:

var layout = react.createclass({

render: function() {

return (

上面的這個例子 header, content, footer 最外層,實際上是沒有閉合的。render 裡面返回的是乙個變數,而上面我的例子,會產生歧義,它並不知道到裡裡結束。

另外包含了一些其它的,類似於編譯器、 transpilers(沒有想到好的詞來表達)。

翻頁並不是太習慣於滾動翻頁,我選擇了 react-pager,其實也很方便,只是需要在 handlepagechanged 自己處理資料請求。只是會有乙個跟 react-router 結合時 browserhistory 的問題,我們接下來說。

路由react 做為 sap 是乙個很好的選擇,但是我希望能夠像正常的 url 請求一樣,所以我又用了 react-router。實際上 routes 是分成兩部分的:client 跟 server,如果你用 nodejs 的很方便。但是我們是用的 go,server 端只能自己來寫,不過最終方法是抽取出來了,也還好。

client 我遇到的幾個方面:

多個 components共用 layout,resource8

上面提到的 browserhistory 問題,加 pagination 時 browserhistory 的處理。這裡需要很看一下 resource7,理解一下 component 的生命週期,我是 componentdidupdate 裡處理,整個**是需要自己來實現的。另外需要在 handlepagechanged 時把翻頁放入歷史裡面 browserhistory.push('/users?page='+newpage)

最後以上是我在使用過程中,遇到的困難跟覺得比較重要的部分。目前看來 reactjs 確實是非常適合於前後端分離的。把資料的渲染工作放到前端,用 api 的載入資料而不是整個頁面可以提公升大約 50% 速度(這個是基於資料量的,測試資料大概百萬級別)。首次請求因為沒有資料的處理跟模板的載入,顯示速度提公升更明顯,相當於靜態的 html 載入,本地測試資料是提公升幾百倍,從大於1s到幾ms。

如果問題歡迎一起討論。

相關資料

Python 哈姆雷特字數統計

def gettext 賦予txt哈姆雷特 全英文小寫 全符號變空格 返回txt txt open c users eternal desktop hamlet.txt r read 路徑要選好 txt txt.lower for ch in txt txt.replace ch,return tx...

python 哈姆雷特 字數統計 詞云

def gettext 賦予txt哈姆雷特 全英文小寫 全符號變空格 返回txt txt open hamlet.txt r read 注意文字的路徑 txt txt.lower 文字字元全部轉變為小寫字母 for ch in txt txt.replace ch,使用空格字元替換掉文字中所有特殊字...

對哈姆雷特進行詞頻統計

def gettext txt open c users administrator desktop python lianxi hamlet.txt r read txt txt.lower 首先把所有字母都轉換成小寫字母 for ch in 排除掉英文本元,用空格替換 txt txt.repla...