Talking about React “componentShouldUpdate ”& “Momo”

Component Lift-Cycle

https://programmingwithmosh.com/javascript/react-lifecycle-methods/

1. Mounting →元件被建立時被執行。
2. Updating →父元件更新傳遞的props or 元件中更新state時執
3. Unmounting →元件移除時執行。

範例：父子元件執行lift-cycle 順序

參考https://iandays.com/2018/07/27/reactlife/index.html

• Mounting: 簡單講就是父元件先執行到render後，再來開始執行子元件的Mounting生命週期，最後執行完子元件的componentDidMount後，再回頭執行父元件的componentDidMount。
• Updating: 父元件執行到render後，換子元件執行直到getSnapshotBeforeUpdate，會再回父元件執行getSnapshotBeforeUpdate，然後再執行子元件的componentDidUpdate，再回父元件執行componentDidUpdate。
• UnMounting: 父元件先執行componentWillUnmount，再來是子元件執行。

引用至：https://iandays.com/2018/07/27/reactlife/index.html

componentShouldUpdate(nextProps, nextState)

• nextProps → component下一個Props值
• nextState → component下一個state值
• return → 回傳true 會從新渲染組件，false則不會從新渲染。

如果沒有shouldComponentUpdate檢查component是否要從新render，每當使用者點擊Button，React就會從新render此component。

在 React v15.5 中新增了Pure Components，會自動檢查props以及state是否有更新，來判斷是否要從新渲染component 。因此不用在component中加入componentShouldUpdate的方法。

但是，在function component中無法使用componentShouldUpdate類似的方法能夠讓我們來控制component是否要從新渲染。

React.memo(Component, areEqual)

React官方提到：React.memo is a higher order component. It’s similar to React.PureComponent but for function components instead of classes.

• Component → 使用者設計的function component。
• areEqual → 讓React決定此component在父元件有props或是state更新時是否需要re-render。

React官方也提到，使用者可以自行設計需要的areEqual function，來判斷component是否需要re-render，areEqual 回傳true 表示props沒有變化無需re-render，false 則反之。預設是判斷props是否有更動。

在上述程式碼中，當button被點擊時會觸發setCount將count中的值加一，觸發了 setState的機制，React會re-render App component，當中屬子元件的Text component也會跟著re-render；但是，同樣屬於子元件的MemoText component並不會同時re-render，React.Memo會比較component中props是不是有變化，來判斷是不是要re-render此component。

React Memo

參考文件：

https://reactjs.org/docs/react-api.html#reactmemo

https://juejin.im/post/5c8edf626fb9a0710d65c7fc

https://segmentfault.com/a/1190000018444604