setState

ReactNative系列-文章

setState

基础用法

在react组件中，我们使用两种数据来控制一个组件：props和state。props (不了解可以去看 -> props详解) 是组件中的属性，一经指定，那么它在整个组件的生命周期中都不再改变。对于需要改变数据，这时候需要state。

一般来说在constructor中初始化state，下面我们来看如何通过state来改变组件中的数据：

export default class BlinkApp extends Component {
  constructor() {
    this.state = {
      msg: 'default'
    };
    setInterval(() => {
      this.setState(
        msg: 'changed'
      );
    }, 2000);
  }
  render() {
    return (
      <View>
        <Text>{this.state.msg}<Text>
      </View>
    );
  }
}

上述程序定义了一个2000毫秒的延时函数，在2秒后更新 Text 组件中的文本。

值得注意的是：更改state必须通过setState方法，像直接 this.state.msg = ‘changed’ 这样赋值无效的，因为它不会引起重新渲染整个组件子树，所以界面上看起来没有任何改变。

setState对组件树的性能影响

在react中，一切界面的变化都是状态state变化，当执行setState方法时，react会以组件为根，重新渲染整个组件子树。用下图的树来表示整个组件树：

但是如果我们的组件树中的子树较多，直接使用setState方法时，react无论如何都会重新渲染整个组件树，但是我们只是想对某一节点进行更新而已，这种方式显然造成了不必要的性能开销。如下图所示，橙色代表期望渲染的节点路径，蓝色代表不期望的。

我们期望只针对绿色进行渲染，那么如何操作呢？sholdComponentUpdate这个生命周期钩子函数可以帮助我们解决setState带来的性能问题。

-> shouldComponentUpdate机制