React.Component 和 React.PureComponent 、React.memo 的區別

2020 年 10 月 21 日
筆記
react技術棧

一結論

React.Component 是沒有做任何渲染優化的，但凡調用this.setState 就會執行render的刷新操作。
React.PureComponent 是繼承自Component，並且對重寫了shouldComponentUpdate周期函數，對 state 和 props 做了淺層比較，當state 和 props 均沒有改變時候，不會render，僅可以用在ClassComponent中
React.memo 功能同React.PureComponent，但React.memo 為高階組件，既可以用在ClassComponent中也可以用在 functionComponent中

二 React.Component

需要手動編寫shouldCompoentUpdate進行 props和state的比較判斷是否需要渲染render

Class Sum extends React.Component {
      constructor(props){
            super(props);
            this.state = {
                  num:0
            }
      }
      shouldCompoentUpdate(nextProps,nextState){
            if(nextPorps.sum === this.props.sum && nextState.num === this.state.num){  
                  return false; // 當props 和state 值均沒有改變時候，讓render不渲染    
            }
            return ture; // 其他情況設置成允許渲染
      }
      render(){
            return (
                  <div>
                      <span>{this.state.num}</span>
                      <span>{this.props.sum}</span>
                  </div>
            )
      }
}

二 React.PureComponent 和 React.memo 的使用

Class Sum extends React.PureComponent {
// 會自動進行props 和 sate 的淺比較 
}

function Add (props){
      return (
            <div>sum = {props.y + props.x}</div>
      )
}
export default React.memo(Add)

注意：當props 或者 state 為一個 Object類型時候，淺比較會失效即 props ，state 發生改變，依舊會阻止render渲染。
此時可以運用的方法有
1 修改state時候，採用 object.assin({},)進行組件合併
2 採用解構賦值進行淺拷貝賦值，這樣props或者state 就不再為原來的值了，可以觸發render刷新操作
3 當組件結構較複雜，存在較多 Object類型時候建議改為使用React.Component

Tags: react技術棧