哈姆雷特之 React

?xiaoxiao, 發(fā)布于2019-08-19 18:10 / 3186人閱讀

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

最近兩三周在主要在寫 React，在這里寫一下，算是個總結(jié)。

webpack

我們的后端語言用的是 Go, 對于寫網(wǎng)站來說，Go 并沒有好的前端資源（js, css，image）的管理方式(打包，壓縮)，另外我們也沒有用任務(wù)的框架，簡單粗暴的 Go http server + package 的方式來實現(xiàn)的，所以也只能借用 JS 的. 開始的時候其實我們用的是 gulp, 因為只需要打包、壓縮生成 manifest 就可以了，它的使用也簡單(也是當(dāng)時對 webpack 的理解不夠)。但是打算換成 ReactJS，它是推薦用 browserify 或 webpack，就這樣決定把之前的 gulp 換成了 webpack。這里面主要的問題是作用域。這里強(qiáng)烈建議看一下 ryfeng 的一篇文章Resource2，關(guān)于 CommonJS 的，因為 webpack 也是基于它的，理解很重要。關(guān)于 AMD 的因為沒有實踐，就不多說了。總之也并沒有那么難。

Component 生命周期

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

JSX

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

我經(jīng)常遇到的一個錯誤 Adjacent JSX elements must be wrapped in an enclosing tag，原因是 React.createClass 里的 render 里面只能返回閉合的標(biāo)簽。像 img， br 這種閉合還是可以理解的，但是我會忘記最外層加一個閉合的標(biāo)簽，為什么？根源就在于 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 里面返回的是一個變量，而上面我的例子，會產(chǎn)生歧義，它并不知道到里里結(jié)束。

另外包含了一些其它的，類似于編譯器、 Transpilers（沒有想到好的詞來表達(dá)）。

翻頁

并不是太習(xí)慣于滾動翻頁，我選擇了 react-pager，其實也很方便，只是需要在 handlePageChanged 自己處理數(shù)據(jù)請求。只是會有一個跟 react-router 結(jié)合時 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ù)的處理跟模板的加載，顯示速度提升更明顯，相當(dāng)于靜態(tài)的 html 加載，本地測試數(shù)據(jù)是提升幾百倍，從大于1s到幾ms。

如果問題歡迎一起討論。

相關(guān)資料

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