如何解决React Native组件不必要的多次重渲染问题

问题原因 #

React 类组件默认只要props、state发生变更就会触发render执行，你在componentDidUpdate中添加的条件判断，仅能控制更新完成后是否执行业务逻辑，无法阻止render方法本身被调用。

解决方案 #

• 方案1：继承React.PureComponent
  PureComponent内置了浅比较逻辑，会对比所有props和state的引用，只有检测到变更时才会触发重渲染，修改方式非常简单：

// 仅修改继承的基类即可
export class Camera extends PureComponent {
  componentDidUpdate(prevProps, prevState){
    if (prevProps.network !== this.props.network){
      this.connect(this.props.network)
      console.log('rendering')
    }
  }
  
  connect=()=>{
    // 业务逻辑实现
  }

  render() {
    return (
      <View>
        <Text>
          Hello World
        </Text>
      </View>
    )
  }
}

如果你的navigation、route属性是每次父组件渲染都会生成的新对象，浅比较会判定为属性变更，此时可以选择方案2。

• 方案2：自定义shouldComponentUpdate生命周期
  你可以手动指定组件的重渲染触发条件，仅在network属性变化时才允许重渲染，完全符合你的业务需求：

export class Camera extends Component {
  // 新增生命周期控制渲染逻辑
  shouldComponentUpdate(nextProps) {
    return nextProps.network !== this.props.network
  }

  componentDidUpdate(prevProps, prevState){
    if (prevProps.network !== this.props.network){
      this.connect(this.props.network)
      console.log('rendering')
    }
  }
  
  connect=()=>{
    // 业务逻辑实现
  }

  render() {
    return (
      <View>
        <Text>
          Hello World
        </Text>
      </View>
    )
  }
}

内容的提问来源于stack exchange，提问作者Jerry seigle