[react] React中如何阻止组件渲染？

[react] react中怎样阻止组件渲染？

• 类组件

  • 在生命周期函数shouldComponentUpdate中，通过return false的方式实现组件更新控制

  • 若继承自React.PureComponent，当props未发生改变（进行浅层比较）时，将不会触发render函数的执行

  • 函数式组件

  • 通过React.memo对组件函数进行封装，当props未发生变化时，将不会执行该函数

  • 在使用React.memo对函数进行封装时，可同时传入一个比较函数作为第二个参数，若该比较函数返回true，则组件函数将不会被调用

  • 通用方法

  • 在定义jsx属性（包括事件处理属性）时，应尽可能将可提取的属性值移至外层定义，以确保其引用地址保持稳定，示例如下

 import React from 'react';

    
  
    
 class Child extends React.PureComponent {
    
     render () {
    
     console.log('child render')
    
     return <h2 style={this.props.style}>Child</h2>
    
     }
    
 }