資訊專欄INFORMATION COLUMN
摘要：最近兩三周在主要在寫，在這里寫一下，算是個總結。但是打算換成，它是推薦用或，就這樣決定把之前的換成了。這里面主要的問題是作用域?？傊膊]有那么難。目前看來確實是非常適合于前后端分離的。
最近兩三周在主要在寫 React，在這里寫一下，算是個總結。
webpack我們的后端語言用的是 Go, 對于寫網(wǎng)站來說，Go 并沒有好的前端資源（js, css，image）的管理方式(打包，壓縮)，另外我們也沒有用任務的框架，簡單粗暴的 Go http server + package 的方式來實現(xiàn)的，所以也只能借用 JS 的. 開始的時候其實我們用的是 gulp, 因為只需要打包、壓縮生成 manifest 就可以了，它的使用也簡單(也是當時對 webpack 的理解不夠)。但是打算換成 ReactJS，它是推薦用 browserify 或 webpack，就這樣決定把之前的 gulp 換成了 webpack。這里面主要的問題是作用域。這里強烈建議看一下 ryfeng 的一篇文章Resource2，關于 CommonJS 的，因為 webpack 也是基于它的，理解很重要。關于 AMD 的因為沒有實踐，就不多說了?？傊膊]有那么難。
Component 生命周期略，其實很重要，主要是因為資料說得很詳細，這里只把地址放在這里，生命周期
JSXReact 里非常重要的一部分是 JSX，雖然你可以用 JS 來代替，我相信大多數(shù)人不會這樣做。所以很有必要說一下。
我經(jīng)常遇到的一個錯誤 Adjacent JSX elements must be wrapped in an enclosing tag，原因是 React.createClass 里的 render 里面只能返回閉合的標簽。像 img， br 這種閉合還是可以理解的，但是我會忘記最外層加一個閉合的標簽，為什么？根源就在于 JSX。我把Resource3里的例子放到這里。
var dropdown =A dropdown list ; render(dropdown);
這是我剛開始的 ReactJS 的寫法:
var Layout = React.createClass({
render: function() {
return (
上面的這個例子 Header, Content, Footer 最外層，實際上是沒有閉合的。render 里面返回的是一個變量，而上面我的例子，會產(chǎn)生歧義，它并不知道到里里結束。
另外包含了一些其它的，類似于編譯器、 Transpilers（沒有想到好的詞來表達）。
翻頁并不是太習慣于滾動翻頁，我選擇了 react-pager，其實也很方便，只是需要在 handlePageChanged 自己處理數(shù)據(jù)請求。只是會有一個跟 react-router 結合時 browserHistory 的問題，我們接下來說。
路由React 做為 SAP 是一個很好的選擇，但是我希望能夠像正常的 URL 請求一樣，所以我又用了 react-router。實際上 Routes 是分成兩部分的：Client 跟 Server，如果你用 NodeJS 的很方便。但是我們是用的 Go，Server 端只能自己來寫，不過最終方法是抽取出來了，也還好。
client 我遇到的幾個方面:
多個 components共用 layout，resource8
上面提到的 browserHistory 問題，加 pagination 時 browserHistory 的處理。這里需要很看一下 Resource7，理解一下 component 的生命周期，我是 componentDidUpdate 里處理，整個代碼是需要自己來實現(xiàn)的。另外需要在 handlePageChanged 時把翻頁放入歷史里面 browserHistory.push("/users?page="+newPage)
最后以上是我在使用過程中，遇到的困難跟覺得比較重要的部分。目前看來 ReactJS 確實是非常適合于前后端分離的。把數(shù)據(jù)的渲染工作放到前端，用 api 的加載數(shù)據(jù)而不是整個頁面可以提升大約 50% 速度（這個是基于數(shù)據(jù)量的，測試數(shù)據(jù)大概百萬級別）。首次請求因為沒有數(shù)據(jù)的處理跟模板的加載，顯示速度提升更明顯，相當于靜態(tài)的 html 加載，本地測試數(shù)據(jù)是提升幾百倍，從大于1s到幾ms。
如果問題歡迎一起討論。
相關資料https://facebook.github.io/react/
[Resource2] http://javascript.ruanyifeng.com/nodejs/module.html
[Resource3]https://facebook.github.io/jsx/
https://www.npmjs.com/package/react-pager
https://github.com/reactjs/react-router
https://github.com/reactjs/react-router/tree/master/docs
[Resource7]https://github.com/reactjs/react-router/blob/master/docs/guides/ComponentLifecycle.md
[Resource8]https://github.com/reactjs/react-router/blob/master/docs/API.md#components-1
文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/79272.html
摘要：安裝后已經(jīng)完成了安裝，并且等待其他的線程被關閉。激活后在這個狀態(tài)會處理事件回調(diào)提供了更新緩存策略的機會。并可以處理功能性的事件請求后臺同步推送。廢棄狀態(tài)這個狀態(tài)表示一個的生命周期結束。 showImg(https://segmentfault.com/img/bVbwWJu?w=2056&h=1536); 不知不覺，已經(jīng)來到了最后的下篇 其實我寫的東西你如果認真去看，跟著去寫，應該能有...
摘要：可以說，如果問題是我們的敵人，代碼是我們的劍，設計模式就是高手心中的劍譜。中級選手，在編程的時候知道何時該用什么設計模式，而什么時候不該用。設計模式被用來簡化設計，讓設計更優(yōu)雅。其中最具有普遍性的方案往往就是我們的設計模式的內(nèi)容。 showImg(https://segmentfault.com/img/remote/1460000019100076?w=800&h=440); 目錄概...
摘要：更多前端內(nèi)容閱讀之前非用戶請自動忽略，此文針對用戶，我個人使用頻率非常高，端開發(fā)者可以選擇性的嘗試部分工具?；蛘哒{(diào)起的調(diào)試工具，跟編輯器親密合體。目前在使用，嘗試。 更多前端內(nèi)容http://www.codefrom.com/p/JavaScript 閱讀之前 非Mac用戶請自動忽略，此文針對Mac用戶，我個人使用頻率非常高，PC端開發(fā)者可以選擇性的嘗試部分工具。 終端...
摘要：為回饋新老用戶，雷特字幕平臺隆重推出手拍唱詞插件，并且免費下載使用。雷特字幕手拍唱詞插件版，支持及，運行的操作系統(tǒng)必須為位及以上操作系統(tǒng)。 雷特字幕自發(fā)行以來受到廣大用戶的青睞，在其豐富的插件中，手拍唱詞一直是用戶最關注，也是最實用的插件之一。為回饋新老用戶，雷特字幕premiere平臺隆重推出手拍唱詞插件，并且免費下載使用。雷特字幕手拍唱詞插件Premiere版，支持Premiere...
閱讀 3287·2021-11-24 09:38
閱讀 2161·2021-11-23 09:51
閱讀 1753·2021-10-13 09:39
閱讀 2628·2021-09-23 11:53
閱讀 1410·2021-09-02 15:40
閱讀 3662·2019-08-30 15:54
閱讀 1138·2019-08-30 13:04
閱讀 2569·2019-08-30 11:01
