哈姆雷特之 React

?xiaoxiao, 發布于2019-08-19 18:10 / 3188人閱讀

摘要：最近兩三周在主要在寫，在這里寫一下，算是個總結。但是打算換成，它是推薦用或，就這樣決定把之前的換成了。這里面主要的問題是作用域。總之也并沒有那么難。目前看來確實是非常適合于前后端分離的。

最近兩三周在主要在寫 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 生命周期

略，其實很重要，主要是因為資料說得很詳細，這里只把地址放在這里，生命周期

JSX

React 里非常重要的一部分是 JSX，雖然你可以用 JS 來代替，我相信大多數人不會這樣做。所以很有必要說一下。

我經常遇到的一個錯誤 Adjacent JSX elements must be wrapped in an enclosing tag，原因是 React.createClass 里的 render 里面只能返回閉合的標簽。像 img， br 這種閉合還是可以理解的，但是我會忘記最外層加一個閉合的標簽，為什么？根源就在于 JSX。我把Resource3里的例子放到這里。

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。

如果問題歡迎一起討論。

相關資料

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

GPU云服務器云服務器哈姆雷特雷特 react _React

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/79272.html

前端20個靈魂拷問徹底搞明白你就是中級前端工程師【下篇】

摘要：安裝后已經完成了安裝，并且等待其他的線程被關閉。激活后在這個狀態會處理事件回調提供了更新緩存策略的機會。并可以處理功能性的事件請求后臺同步推送。廢棄狀態這個狀態表示一個的生命周期結束。 showImg(https://segmentfault.com/img/bVbwWJu?w=2056&h=1536); 不知不覺，已經來到了最后的下篇其實我寫的東西你如果認真去看，跟著去寫，應該能有...

fireflow 2019-08-30 15:44 評論0 收藏0
被誤讀的設計模式

摘要：可以說，如果問題是我們的敵人，代碼是我們的劍，設計模式就是高手心中的劍譜。中級選手，在編程的時候知道何時該用什么設計模式，而什么時候不該用。設計模式被用來簡化設計，讓設計更優雅。其中最具有普遍性的方案往往就是我們的設計模式的內容。 showImg(https://segmentfault.com/img/remote/1460000019100076?w=800&h=440); 目錄概...

William_Sang 2019-08-16 17:14 評論0 收藏0
總結個人2015提高前端效率的方法和工具

摘要：更多前端內容閱讀之前非用戶請自動忽略，此文針對用戶，我個人使用頻率非常高，端開發者可以選擇性的嘗試部分工具。或者調起的調試工具，跟編輯器親密合體。目前在使用，嘗試。更多前端內容http://www.codefrom.com/p/JavaScript 閱讀之前非Mac用戶請自動忽略，此文針對Mac用戶，我個人使用頻率非常高，PC端開發者可以選擇性的嘗試部分工具。終端...

Jingbin_ 2019-08-22 10:57 評論0 收藏0
脫網安裝雷特字幕手拍唱詞插件Premiere版

摘要：為回饋新老用戶，雷特字幕平臺隆重推出手拍唱詞插件，并且免費下載使用。雷特字幕手拍唱詞插件版，支持及，運行的操作系統必須為位及以上操作系統。雷特字幕自發行以來受到廣大用戶的青睞，在其豐富的插件中，手拍唱詞一直是用戶最關注，也是最實用的插件之一。為回饋新老用戶，雷特字幕premiere平臺隆重推出手拍唱詞插件，并且免費下載使用。雷特字幕手拍唱詞插件Premiere版，支持Premiere...

TalkingData 2019-06-28 13:28 評論0 收藏0