React最佳實踐？看看Facebook員工寫的這本書能讓你學到什麼？

對你來說，這是篇閱讀指南，關於《React設計模式與最佳實踐》這本書。

對我來說，這是我的讀書筆記。

我為什麼寫這篇文章？

圖靈社群有一個「電子書閱讀獎勵計劃」：

買書30日之內，看完，並在公共平臺發表心得、評價、思索、疑惑等等。

獎勵等值電子書代金劵。

所以我是來拿獎勵的。

接下來，我會：

1. 客觀地描述這本書講了什麼？以什麼方式講的？
2. 主觀地談談我從《React設計模式與最佳實踐》中的收穫

通過我的表達，如果你覺得這本書能給你帶來提升，你也可以買一本看看。

連結：圖靈社群《React設計模式與最佳實踐》

你為什麼要看這本書？

入門React框架並不難，簡單地閱讀入門文件，然後跟著官方的tutorial專案走一遍，就基本可以上手使用了。

但是，

上手 !== 會。

你還不能靈活的使用

我是開始實習的時候接觸的react，用兩天時間簡單學了React（做了官方的tutorial專案），當然還不能幹活，又學了三天meteor，redux全家桶，styled-components，ant-design，第二個星期進了專案。

這時候能幹活了嗎？能，分給我一個模組。因為是一個管理系統，所以有些地方不明白可以參考其他模組的程式碼，照貓畫虎，跌跌撞撞，還真把一個模組的頁面給寫完了。

但是也僅限於能寫出來。

問問你自己：

• 程式碼為什麼這麼寫？
• 元件為什麼這麼用？
• 沒有參照你自己能寫出來嘛？
• React框架帶來了什麼提升？

你說不清楚的。

你還不能用的優雅

如果你覺得自己已經能夠靈活地使用，那麼：

• 你知道背後的原理嗎？
• 你敢保證自己的程式碼質量嗎？
• 你知道怎麼優化你的應用嗎？
• 你覺得你的專案的開發效率和可靠性夠高嗎？

如果這些問題你都沒有頭緒，或者不能給自己一個肯定的答案，那麼這就是你看這本書的理由。

這本書講了什麼？

書名講的很清楚，設計模式與最佳實踐。

這本書可以分成三部分：

1. 提升程式碼質量（程式碼風格，可複用性高的元件，合理的使用方式）
2. React生態中的一些指向性建議（如何生成文件，React如何寫樣式，React應用的服務端渲染。）
3. 一個完善的開發模式（程式碼風格->高可複用的元件->各種功能（表單，樣式）的解決方案->提升效能->效能監控->測試）

可以說，涉及到了React開發與應用的各個方面。

怎麼講的？

本書講述的風格是：

先通過一個不完美的例子，分析它，找出問題。

然後講述背後的原理是如何解決這個問題的。

然後用一種優雅的方式，解決這個問題。

但是並沒有極其深入某項技術。比如講測試，只講瞭如何寫測試用例，給了幾個例子，讓你認識到React測試怎麼寫，需要注意哪些點，然後講了一些比較好的庫（jest）的基本用法。

但是我覺得講的全面但不深入對於這本書來說是有必要的，因為本書的目的是：

讓你知道React的設計模式應該有哪些東西，這些東西能夠解決什麼問題，以及如何解決的。

讀完本書之後，需要你根據本書的指導，再進一步的深入各個環節的細節。

我的收穫

我知道了什麼是高質量的React元件：

• 邏輯抽象合理（一個元件應該只負責一個抽象意義上的功能）
• 介面設計清晰（準確的Proptypes）
• 清晰的文件（通過react-docgen和storybook自動生成）
• 合理的資料流（資料來源清晰，狀態儲存在合理的位置）
• 優化過的效能（用純元件、不可突變、shouldComponentUpdate、合理的使用state，避免不必要的渲染）
• 完善的自動化測試用例
• 高階元件（通過對邏輯的封裝提升通用性）

我知道了如何通過合理的設計模式提高專案的開發效率（質量和速度的提升）：

• 優雅的程式碼風格

• 清晰的文件

• 高可複用的元件

• 效能監控與效能優化

• 完善的測試

• 服務端渲染的作用以及解決思路

當然，我所說的知道僅僅是知道，目前還沒有深入的瞭解和足夠的實踐。

但這就是我讀完本書後，需要繼續學習的地方。