shouldComponentUpdate机制

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u013003052/article/details/87894750


ReactNative系列-文章

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>
    );
  }
}
展开阅读全文

没有更多推荐了,返回首页