React學習筆記

標籤：

事件處理和參數合成

React裡只需要把事件處理器以駝峰形式命名當作組件的props傳入即可。React內部建立一套合成事件系統來使所有事件在IE8以上的瀏覽器表現一致。也就是說，React知道如何冒泡和捕獲事件，而且你的事件處理器接收到的參數和W3C規範一致，無論你使用哪種處理器。

幕後原理：自動綁定（ Autobinding ）和事件代理（ Event Delegation ）

自動綁定：在JavaScript建立回調的時候，為了保證 this 的正確性，一般都需要顯式的Binder 方法到它的執行個體上。在React中，所有方法都被自動綁定到它的組件執行個體上。React還緩衝這些方法，所以CPU和記憶體都是非常高效。

事件代理：React實際上並沒有把事件處理器綁定到節點本身。當React啟動時，它在最外層使用唯一一個事件監聽器處理所有事件。當組件被載入和卸載時，只是在內部添加或刪除事件處理器。當事件觸發時，React根據映射決定如何分發。當映射沒有事件處理器時，會當作空處理。

state工作原理

常用的通知Reacts資料變化的方法是調用 setState(data,callback) 。這個方法會合并data到 this.state 中，並重新渲染組件。嘗試把儘可能多的組件無狀態化。常用的模式是建立多個只負責渲染資料的無狀態組件，在它們的上層建立一個有狀態組件並把它的狀態通過props傳給子級。這個有狀態的組件封裝了所有使用者的互動邏輯，而這些無狀態的組件則負責聲明式的渲染資料。

在需要使用者輸入時、服務要求時、時間變化等做出響應時，使用state。
建立一個狀態化的組件時，思考表示它的狀態最少需要哪些資料，並只把這些資料存入 this.state。

資料流

React裡，資料通過從上面介紹的 props 從擁有者流向歸屬者。這就是高效的單向資料繫結；擁有者們通過它們的 props 或 state 計算出一些值，並把這些值綁定到它們擁有的的組件的props上。因為這個過程會遞迴的調用，所以資料變化會自動在所有它們被使用的地方反映出來。

Mixins

組件是React複用代碼的最佳方式，但有時一些不同的組件間也需要共用一些功能。有時會被成為跨切面關注點。React使用 mixins 來解決這類問題。

受控組件

受控組件：一個受控的組件有一個 value prop。渲染一個受控 <input> 會反映 value prop的值。所以在這個例子中，我們更接受使用者提供的值來更新 input 組件的 value prop。
不受控組件：一個沒有 value 屬性的 <input> 是一個不受控的組件。不受控組件維持自己的內部狀態。

使用React的流程

• 從模型 （mock） 開始
• 把UI拆分為一個組件的層級
• 用React建立一個靜態版本

  要構建一個靜態版本app來渲染你的模型，你將會想到構建一個重用其它組件並利用props傳遞資料的組件。props是一種從父級傳遞資料到子級的方式。 State 僅僅是為互動性，也就是隨著時間變化的資料鎖預留的。

• 確定最小（但完備）的 UI state 表達
• 確定你的state應該存放在於哪裡
• 添加反向資料流

確定哪些組件可以改變或擁有state

• 確定哪些組件基於 state 來渲染內容
• 找到一個共同的擁有者組件（在所有需要這個state組件的層次之上，找出共有的單一組件）。
• 要麼是共同擁有者，要麼是在其它層級裡更進階的組件應該擁有這個state
• 如果你不能找到一個組件可以讓其有意義的擁有這個 state ，可以簡單地建立一個新的組件 hold 住這個 state ，並把它添加到比共同擁有組件更高的層級上。

來自為知筆記(Wiz)

React學習筆記