setState

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


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机制

展开阅读全文

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