哈姆雷特之 React

時間 2020-02-01

原文原文鏈接

最近兩三週在主要在寫 React，在這裏寫一下，算是個總結。javascript

webpack

咱們的後端語言用的是 Go, 對於寫網站來講，Go 並無好的前端資源（js, css，image）的管理方式(打包，壓縮)，另外咱們也沒有用任務的框架，簡單粗暴的 Go http server + package 的方式來實現的，因此也只能借用 JS 的. 開始的時候其實咱們用的是 gulp, 由於只須要打包、壓縮生成 manifest 就能夠了，它的使用也簡單(也是當時對 webpack 的理解不夠)。可是打算換成 ReactJS，它是推薦用 browserify 或 webpack，就這樣決定把以前的 gulp 換成了 webpack。這裏面主要的問題是做用域。這裏強烈建議看一下 ryfeng 的一篇文章Resource2，關於 CommonJS 的，由於 webpack 也是基於它的，理解很重要。關於 AMD 的由於沒有實踐，就很少說了。總之也並無那麼難。css

Component 生命週期

略，其實很重要，主要是由於資料說得很詳細，這裏只把地址放在這裏，生命週期html

JSX

React 裏很是重要的一部分是 JSX，雖然你能夠用 JS 來代替，我相信大多數人不會這樣作。因此頗有必要說一下。前端

我常常遇到的一個錯誤 Adjacent JSX elements must be wrapped in an enclosing tag，緣由是 React.createClass 裏的 render 裏面只能返回閉合的標籤。像 img， br 這種閉合仍是能夠理解的，可是我會忘記最外層加一個閉合的標籤，爲何？根源就在於 JSX。我把Resource3裏的例子放到這裏。java

var dropdown =
  <Dropdown>
    A dropdown list
    <Menu>
      <MenuItem>Do Something</MenuItem>
      <MenuItem>Do Something Fun!</MenuItem>
      <MenuItem>Do Something Else</MenuItem>
    </Menu>
  </Dropdown>;

render(dropdown);

這是我剛開始的 ReactJS 的寫法:node

var Layout = React.createClass({
  render: function() {
    return (
      <Header />
      <Content />
      <Footer />
    );
  }
});

上面的這個例子 Header, Content, Footer 最外層，其實是沒有閉合的。render 裏面返回的是一個變量，而上面個人例子，會產生歧義，它並不知道到裏裏結束。react

另外包含了一些其它的，相似於編譯器、 Transpilers（沒有想到好的詞來表達）。webpack

翻頁

並非太習慣於滾動翻頁，我選擇了 react-pager，其實也很方便，只是須要在 handlePageChanged 本身處理數據請求。只是會有一個跟 react-router 結合時 browserHistory 的問題，咱們接下來講。git

路由

React 作爲 SAP 是一個很好的選擇，可是我但願可以像正常的 URL 請求同樣，因此我又用了 react-router。實際上 Routes 是分紅兩部分的：Client 跟 Server，若是你用 NodeJS 的很方便。可是咱們是用的 Go，Server 端只能本身來寫，不過最終方法是抽取出來了，也還好。github

client 我遇到的幾個方面:

多個 components共用 layout，resource8
上面提到的 browserHistory 問題，加 pagination 時 browserHistory 的處理。這裏須要很看一下 Resource7，理解一下 component 的生命週期，我是 componentDidUpdate 裏處理，整個代碼是須要本身來實現的。另外須要在 handlePageChanged 時把翻頁放入歷史裏面 browserHistory.push('/users?page='+newPage)

最後

以上是我在使用過程當中，遇到的困難跟以爲比較重要的部分。目前看來 ReactJS 確實是很是適合於先後端分離的。把數據的渲染工做放到前端，用 api 的加載數據而不是整個頁面能夠提高大約 50% 速度（這個是基於數據量的，測試數據大概百萬級別）。首次請求由於沒有數據的處理跟模板的加載，顯示速度提高更明顯，至關於靜態的 html 加載，本地測試數據是提高几百倍，從大於1s到幾ms。

若是問題歡迎一塊兒討論。

哈姆雷特之 React

webpack

Component 生命週期

JSX

翻頁

路由

最後

相關資料