這專案是用來測試React.PureComponent
實際的更新狀況,特別針對Component.prop.children
不為Pure
的情況下測試
也針對官方提到的Note做測試
React.PureComponent’s shouldComponentUpdate() skips prop updates for the whole component subtree. Make sure all the children components are also “pure”
主要檔案是App.js和Children.js,可以Clone下來或是在這裡直接試試看
-
當
extends React.PureComponent
又再使用shouldComponentUpdate
時,console.log會報錯 -
當傳給
Children Component
的props「是」一樣的reference,更新Children Component
會觸發children的ComponentDidUpdate & render,但畫面上不會有任何改變,真的被skip掉了,ex.value={this.value}
-
當傳給
Children Component
的props「不是」一樣的reference,更新Children Component
會影響畫面上的結果,一樣有觸發ComponentDidUpdate & render;更新Parent Component
會觸發Children Component
的update & render (pure的時候沒有),ex.value={{x: 1, y: 2}}