this.setState和this.state直接赋值

https://www.cnblogs.com/t-sun...

this.setState

说明

1.如果需要修改this.state中的数据 必须调用this.setstate这个方法

这个方法里面有2个参数

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

参数2：类型  函数 1、查看数据是否已经更新 2、可以获取到数据更新后的最新的DOM结构

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

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

2.使用对this.state赋值并没有什么作用，官方提醒，应该把this.state当成不可变变量。
而使用this.setState方法，会触发异步修改状态，状态改变的同时，会重新执行一次willUpdate，render等流程。
需要注意的是，避免在执行完this.setState后马上读取this.state，此操作并不会获得最新修改的状态。

知识点：

1.不要用this.state赋值

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

// 错误，会将多个 setState() 调用合并为一次更新
//因为this.props和this.state 可能是异步更新的，你不能依赖他们的值计算下一个state(状态)
this.setState({
  counter: this.state.counter + this.props.increment,
});

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

3.执行setState()之后干了什么？出发render，willUpdate等

4.setState()可以接受一个函数作为参数，取到最新值

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

5.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。