React 組件之 Component PureComponent Function Component

Virtual DOM , 通過高效的Diff算法對變化的部分首尾兩端做批量更新，所有的比較都是淺比較shallowEqual。誰都玩不起深比較，facebook自己都做不到~

Component ：一定要配套使用shouldComponentUpdate , 否則不管props or state是否更新組件一定更新

pureComponent ：當組件的props和state不變時，組件是不更新的。僅僅只需要替換component => pureComponent，零投入超高回報

function Component：寫純函數組件非常簡潔優雅，官方也推薦這種寫法。但是，這並不代表純函數組件是性能最好的組件寫法。
在內部被包裝成了一個只有render方法的StatelessComponent組件，在所有情況下都會更新。
（facebook說過要優化StatelessComponent，要優化它的性能也很簡單，但就是一直沒優化，也不知道為什么。后來我才知道有了終極解決方案，React Hook）
因此，並不建議使用它寫比較復雜的組件

總結：

PureComponent > StatelessComponent > Component

function Component vs PureCompoent ,不建議比較復雜的頁面，使用function Component.

 

參考知乎鏈接：React組件性能優化實例解析 https://zhuanlan.zhihu.com/p/34632531