《React小書》終結筆記

到今天爲止終於刷完了鬍子大哈的React小書，一開始就是衝着對Redux的理解去的，期間也在課後練習的ScriptOj上完成了小書推薦的題目，第三章是收費的，可是服務器好像掛了，郵件都收不了。。。後來發現react小書網站的第三章就是靠js增長了一層蒙版彈窗。。。在Chrome裏把這個頁面禁用js就能夠看了。。。。

React小書地址：連接

ScriptOj地址：連接

個人ScriptOj AC代碼：連接

個人練習筆記代碼：連接

一些筆記？

1。
組件化，能夠寫一個component，而後引用的時候傳入參數，在component裏用this.props讀取，更加定製話組件，好比組件的大小和位置。

2。
redux的觀察者模式，即數據發生變化時自動幫咱們在dispatch的時候renderApp從新渲染頁面

具體實現一個觀察者模式的例子，咱們能夠本身寫一個EventEmitter，在scriptOj上恰好有這麼一道題，題目連接，個人代碼：github代碼連接
(觀察者模式在前端開發中很是經常使用，咱們常常用的事件就是觀察者模式的一種體現。它對咱們解耦模塊、開發基於消息的業務起着很是重要的做用。Node.js 原生自帶 EventEmitter 模塊，可見它的重要性。）

3。

• 高階組件就是一個函數，傳給它一個組件，它返回一個新的組件。新的組件使用傳入的組件做爲子組件。
• 高階組件的做用是用於代碼複用，能夠把組件之間可複用的代碼、邏輯抽離到高階組件當中。新的組件和傳入的組件經過 props 傳遞信息。
• 高階組件有助於提升咱們代碼的靈活性，邏輯的複用性。靈活和熟練地掌握高階組件的用法須要經驗的積累還有長時間的思考和練習，若是你以爲本章節的內容沒法徹底消化和掌握也沒有關係，能夠先簡單瞭解高階組件的定義、形式和做用便可。

4。
Dumb組件和Smart組件：

• Dumb組件只依賴外部props，產出值不依賴所有變量，相似純函數的高可服用性組件。
• 當咱們拿到一個需求開始劃分組件的時候，要認真考慮每一個被劃分紅組件的單元到底會不會被複用。若是這個組件可能會在多處被使用到，那麼咱們就把它作成 Dumb 組件。
• Smart 組件。它們專門作數據相關的應用邏輯，和各類數據打交道、和 Ajax 打交道，而後把數據經過 props 傳遞給 Dumb，它們帶領着 Dumb 組件完成了複雜的應用程序邏輯。
• Smart 組件不用考慮太多複用性問題，它們就是用來執行特定應用邏輯的。Smart 組件可能組合了 Smart 組件和 Dumb 組件；可是 Dumb 組件儘可能不要依賴 Smart 組件。由於 Dumb 組件目的之一是爲了複用，一旦它引用了 Smart 組件就至關於帶入了一堆應用邏輯，致使它沒法無用，因此儘可能不要幹這種事情。一旦一個可複用的 Dumb 組件之下引用了一個 Smart 組件，就至關於污染了這個 Dumb 組件樹。若是一個組件是 Dumb 的，那麼它的子組件們都應該是 Dumb 的纔對。
  

5。
reducer不必定必需要和action分開，其實多數狀況下特定的 action 只會影響特定的 reducer，直接放到一塊兒能夠更加清晰地知道這個 action 其實只是會影響到什麼樣的 reducer。而分開會給咱們維護和理解代碼帶來額外沒必要要的負擔，這有種矯枉過正的意味。
鬍子大哈寫 reducer 文件的習慣，僅供參考：
定義 action types 編寫 reducer **跟這個 reducer 相關的 action creators