FE.SRC-React實戰與原理筆記

時間 2019-11-09

標籤 fe.src src react 實戰原理筆記欄目 React 简体版

原文原文鏈接

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)html

context模式

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

組合組件(Compound Component)

使用者只須要傳遞子組件，子組件所須要的props在父組件會封裝好，引用子組件的時候就不必傳遞全部props了。react

高階組件(HOC)

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

函數組件

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

render props

給某個組件經過 props 傳遞一個函數，而且函數會返回一個 React 組件github

提供者模式(Provider Pattern)

提供者模式能夠解決非父子組件下的信息傳遞問題, 或者組件層級太深須要層層傳遞的問題web

State Reducer

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

Controlled Components

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

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

組件通訊: broadcast dispatch state props contextsegmentfault

其餘狀態管理： 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])