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带来的性能问题。