shouldComponentUpdate机制

机制

在react开发中，经常需要对数据state状态进行改变，但是这种方式每当setState的时候都会将所有的组件重新渲染一遍，这样就会有重复渲染render的问题。

如下图组件树：

默认情况下，当执行setState()方法时，react 会重新渲染整个组件树，这造成不必要的性能开销。
黄色的节点表示我们修改了数据的节点，我们希望只重新渲染这个部分，而其它蓝色的节点是我们不希望重复渲染的。

这时候，实现shouldComponentUpdate()函数可以用来指明在什么样的确切条件下，这个组件得到重绘。当然，对于界面完全由 props 和 state 所决定的组件，你可以利用PureComponent (详情可以去看 -> Component和PureComponent的区别)来为你做这个工作。

下面先回顾react的生命周期：(图片来自网络，侵删)

可以看到在shouldComponentUpdate()函数返回true时，才会触发render钩子。

shouldComponentUpdate()函数默认返回true，可以对其进行自定义的实现：

shouldComponentUpdate(nextProps, nextState) {
  return nextState.someData !== this.state.someData
}

• nextProps: 表示下一个props。
• nextState: 表示下一个state的值。

使用

以一个自定义Title组件来分析：

class Title extends React.Component {
  constructor() {
    this.state = {
      name: '标题',
    };
  }

  render() {
    return (
      <View className="Title">
        <Text>{this.state.name}</Text>
      </View>
    );
  }
}

class Content extends React.Component {
  constructor() {
    this.state = {
      content: '内容',
    };
  }
  
  componentDidMount() {
    this.setState({
      content: '新的内容',
    });
  }

  render() {
    return (
      <View className="Content">
        <Title></Title>
        <Text>{this.state.content}</Text>
      </View>
    );
  }
}

当我在Content组件调用setState方法时，Content组件包括其所有的子组件（Title）都会重新render，但是Title组件里并没有state的改变，我不希望它重写render。这时候可以将Title组件改为这样：

class Title extends React.Component {
  constructor() {
    this.state = {
      name: '标题',
    };
  }

  shouldComponentUpdate(nextProps, nextState) {
    return nextState.name !== this.state.name;
  }

  render() {
    return (
      <View className="Title">
        <Text>{this.state.name}</Text>
      </View>
    );
  }
}