this.setState使用时的一些坑

this.setState

 

若是须要修改this.state中的数据 必须调用this.setstate这个方法

这个方法里面有2个参数

参数1：类型 对象 key是this.state中的key值 val是修改后的数据

参数2：类型  函数 一、查看数据是否已经更新 二、能够获取到数据更新后的最新的DOM结构

 

书写方案1：this.setstate({},()=>{})

书写方案2：this.setstate(()=({}),()=>{})

 

 

 

关于 setState() 有三件事是你应该知道的。

 

1.不要直接修改 state(状态)

this. state.comment = 'Hello';

上述代码并不会从新渲染组件，须要使用this.setState()代替：

this.setState({
  comment: 'Hello'
});

须要注意的是惟一能够分配 this.state 的地方是构造函数。

 

 

2.state(状态) 更新多是异步的

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

由于this.props和this.state 多是异步更新的，你不能依赖他们的值计算下一个state(状态)。如下面的代码为例:

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

 

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

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

 

 

3.state(状态)更新会被合并

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

 

 

 

setState()的异步更新。

 

1.执行setState()以后干了什么？

setState()方法经过一个队列机制实现state更新，当执行setState()的时候，会将须要更新的state合并以后放入状态队列，而不会当即更新this.state(能够和浏览器的事件队列类比)。若是咱们不使用setState而是使用this.state.key来修改，将不会触发组件的re-render。若是将this.state赋值给一个新的对象引用，那么其余不在对象上的state将不会被放入状态队列中，当下次调用setState()并对状态队列进行合并时，直接形成了state丢失。

 

2.setState()能够接受一个函数做为参数？

setState() 不只可以接受一个对象做为参数，还可以接受一个函数做为参数。函数的参数即为 state 的前一个状态以及 props。

React文档中对setState的说明以下：

void setState (

      function|object nextState,

      [function callback]

)

上述代码的第二个参数是一个回调函数，在setState() 的异步操做结束而且组件已经从新渲染的时候执行。换句话说，咱们能够经过这个回调来拿到更新的state的值。

 

3.执行setState()后能拿到最新的state值吗？

之前在写代码时候，老是遇到明明执行过setState()，可是state的值却不是最新的，那么如何解决这个问题呢？

由于setState()函数接受两个参数，一个是一个对象，就是设置的状态，还有一个是一个回调函数，是在设置状态成功以后执行的，因此咱们能够经过回掉拿到最新的state值。代码以下：

updateData = (newData) => {
    this.setState(
        { data: newData },
        () => {
            //这里打印的是最新的state值
            console.log(that.state.data);
        }
    );
}

 

4.setState()必定是异步更新吗？ 

咱们先来看看下面的代码：

function incrementMultiple() {
      this.setState({count: this.state.count + 1});
      this.setState({count: this.state.count + 1});
      this.setState({count: this.state.count + 1});
}

 

直观上来看，当上面的 incrementMultiple 函数被调用时，组件状态的 count 值被增长了3次，每次增长1，那最后 count 被增长了3。可是，实际上的结果只给 state 增长了1。

 

 

事实上，setState 方法与包含在其中的执行是一个很复杂的过程，从 React 最初的版本到如今，也有无数次的修改。它的工做除了要更动 this.state 以外，还要负责触发从新渲染，这里面要通过 React 核心 diff 算法，最终才能决定是否要进行重渲染，以及如何渲染。并且为了批次与效能的理由，多个 setState 呼叫有可能在执行过程当中还须要被合并，因此它被设计以延时的来进行执行是至关合理的。

 

在 React 的 setState 函数实现中，会根据一个变量 isBatchingUpdates 判断是直接更新 this.state 仍是放到队列中回头再说，而 isBatchingUpdates 默认是 false，也就表示 setState 会同步更新 this.state，可是，有一个函数 batchedUpdates，这个函数会把 isBatchingUpdates 修改成 true，而当 React 在调用事件处理函数以前就会调用这个 batchedUpdates，形成的后果，就是由 React 控制的事件处理过程 setState 不会同步更新 this.state。

 

 

由 React 控制的事件处理过程 setState 不会同步更新 this.state！

也就是说，在 React 控制以外的状况， setState 会同步更新 this.state！

但大部份的使用状况下，咱们都是使用了 React 库中的表单组件，例如 select、input、button 等等，它们都是 React 库中人造的组件与事件，是处于 React 库的控制之下，好比组件原色 onClick 都是通过 React 包装。在这个状况下，setState 就会以异步的方式执行。