React實戰與原理筆記

概念與工具集

jsx語法糖;cli;state管理;jest單元測試;
webpack-bundle-analyzer
Storybook
查看更多...

生命週期

constructor()

用於初始化內部狀態，很少使用；
唯一可以修改state的地方；
使用 this.state 來初始化 state
給事件處理函數綁定 this

getDerivedStateFromProps()

當創建時、接收新的 props 時、setState 時、forceUpdate 時會執行這個方法
當state需要從props初始化時使用；
儘量不要使用：維護兩者狀態一致性會增加複雜度；
每次render都會調用
典型場景;表單控件獲取默認值

componentWillMount()

UI渲染完成後調用
只執行一次
典型場景：獲取外部資源

componentWillUnmount()

組件將要移除時調用
資源釋放（一些事件監聽和定時器需要在此時清除）

getSnapshotBeforeUpdate()

在頁面render之前調用，state已更新
典型場景：獲取render之前的DOM狀態

componentWillUpdata(nextProps, nextState)

組件初始化時不調用，只有在組件將要更新時才調用，此時可以修改state

componentDidUpdate()

每次UI更新時調用
典型場景：頁面需要根據props變化重新獲取數據

shouldComponentUpdate(nextProps, nextState)

決定vdom是否要重繪
一般可以由PureComponent自動實現
典型場景：性能優化

render()

創建虛擬dom，進行diff算法，更新dom樹都在此進行。此時就不能更改state了。

componentDidMount()

組件渲染之後調用，只調用一次。

組件設計模式

組件

就是狀態機器UI=fn(state) (狀態分類：domain ui app)

context模式

主要應用場景在於很多不同層級的組件需要訪問同樣一些的數據。如下圖，組件a、組件g、組件f需要共享數據，則只需要在最外層套上Provider，需要共享的組件使用Consumer即可。React新Context API在前端狀態管理的實踐

組合組件(Compound Component)

使用者只需要傳遞子組件，子組件所需要的props在父組件會封裝好，引用子組件的時候就沒必要傳遞所有props了。

高階組件(HOC)

高階組件本質是一個接受 Component 並返回新的 Component 的函數。目的是爲了複用通用邏輯 [深入理解 React 高階組件
](https://mp.weixin.qq.com/s?__...

函數組件

是純 UI 組件，也稱無狀態組件(SFC:Stateless Functional Component)。渲染所需要的數據只通過 props 傳入, 不需要用 class 的方式來創建 React 組件, 也不需要用到 this 關鍵字，或者用到 state [React中函數式聲明組件
](https://segmentfault.com/a/11...

render props

給某個組件通過 props 傳遞一個函數，並且函數會返回一個 React 組件

提供者模式(Provider Pattern)

提供者模式可以解決非父子組件下的信息傳遞問題, 或者組件層級太深需要層層傳遞的問題

State Reducer

可以讓父組件控制子組件state。render props 可以控制子組件的UI是如何渲染的，state reducer則可以控制子組件的state.

Controlled Components

將原來子組件改變state的邏輯移到父組件中，由父組件控制。
異步

實戰-狀態管理與組件通信

組件通信: broadcast dispatch state props context

其他狀態管理： dva, mobx,flexible,reflux,flummox

flux

action:當需要改變應用的狀態或有 View 需要更新時，你需要觸發一個 Action
action creator:把 type 和 payload（載荷）封裝成一個 Action。type 是你預定義的多個 type （通常是一個常量列表）之一，代表系統特定的 action。一旦 action 消息創建好了，Action Creator 就會把它傳遞給 Dispatcher
Dispatcher: 它保存着所有需要發送 action 的 store 列表。當 Action Creator 給過來一個 action，它會把這個 action 傳遞給各個 store。
waitfor:Dispatcher 的行爲是同步的。如果想要在 store 之間實現依賴，有的更新完了其他的才能更新，你可以使用 Dispatcher 提供的 waitFor() 來實現。
store:所有的狀態變化,必須通過 Action Creator/Dispatcher 通道。使用switch判斷 action 的類型，決定是否相應。如果相應則根據 action 找出需要變化的部分，更新 state。

mobx

observable: 通過 observable(state) 定義組件的狀態，包裝後的狀態是一個可觀察數據（Observable Data）。
observer: 通過 observer(ReactComponent) 定義組件
action: 通過 action 來修改狀態。

redux

react-redux 提供了兩個重要的對象，Provider 和 connect，前者使 React 組件可被連接（connectable），後者把 React 組件和 Redux 的 store 真正連接起來。
通過 reducer 創建一個 store，每當我們在 store 上 dispatch 一個 action，store 內的數據就會相應地發生變化。
provider
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])