关于thisState的那些事

Posted 2020-12-23 jack-wangsir

1.state的定义

　　状态（state） 和 属性（props） 类似，都是一个组件所需要的一些数据集合，但是它是私有的，并且由组件本身完全控制，可以认为它是组件的“私有属性（或者是局部属性）”。

2.thisState的三件事

　　1.不要直接修改state的值

1 this.setState({
2   comment: ‘Hello‘
3 });

 

　　2.state（状态）的更新可能是异步的

　　React 为了优化性能，有可能会将多个 setState() 调用合并为一次更新。

　　因为this.props和this.state 可能是异步更新的，你不能依赖他们的值计算下一个state(状态)。

 

1 this.setState({
2   counter: this.state.counter + this.props.increment,
3 });

 

　　我们并不能通过上述代码得到想要的值，为了弥补这个问题，使用另一种 setState() 的形式，接受一个函数。这个函数将接收前一个状态作为第一个参数，应用更新时的 props 作为第二个参数，代码如下：

 

 

1 this.setState((prevState, props) => ({
2   counter: prevState.counter + props.increment
3 }));

 

　　3.state（状态）更新会被合并

　　当你调用 setState()， React 将合并你提供的对象到当前的状态中。所以当State是一个多键值的结构时，可以单独更新其中的一个，此时会进行“差分”更新，不会影响其他的属性值。