React 如何避免无用重复渲染

什么是无用渲染

当重复设置 setState 为同一个值，React 组件也会重复渲染，这种渲染是没必要的；

怎么避免无用渲染

• class 组件

  • shouldComponentUpdate

        shouldComponentUpdate(nextProps, nextState) {
            if (this.state.count === nextState.count) {
                return false
            }
            return true
        }
    
    

  • PureComponent

    class ClassComponent extends React.PureComponent{
    
    }
    

• 函数组件

  • React.memo

  const Funcomponent = ()=> {
      return (
          <div>
              Hiya!! I am a Funtional component
          </div>
      )
  }
  const MemodFuncComponent = React.memo(FunComponent)
  

React.memo 和 PureComponet 的原理

React.memo 会返回一个纯化(purified) 的组件 MemoFuncComponent, 当函数组件的 参数 prop 和 状态 state 发生变化时，React 会检查前一个 prop 和 state 是否和下一个相同( 进行一次浅比较 )，如果相同，组件将不会重新渲染；

参考

使用 React.memo()来优化函数组件的性能

• Previous
  JS Memoization
• Next
  跨域