前端成长之路（一）react中setState需要注意的几点及嵌套state的更新

一直没有对setState有什么很深入的了解，最近阅读了一些文章，深感setState的运用并不简单
setState的使用不当，很有可能会导致一些莫名其妙的bug
首先是setState的更新机制：setState是通过队列机制实现state更新的。 执行setState时，将需要更新的state合并后放入状态队列，而不会立刻更新state，队列机制可以批量更新state。

在React的生命周期和合成事件执行前后都有相应的钩子，分别是pre钩子和post钩子，pre钩子会调用batchedUpdate方法将isBatchingUpdates变量置为true，开启批量更新，而post钩子会将isBatchingUpdates置为false

一.setState并不保证同步执行
调用setState后，并不会直接改变state的值，而是会产生一个即将处理的state改变。在调用setState之后立即查看，有可能值并没有改变。所以，setState并没有办法保持同步，react可能会因为追求性能而进行批量处理

感觉这么说更准确吧：setState是同步执行的，但是state并不一定会同步更新

二.setState如何让他同步更新
1.添加回调函数
2.在setTimeout、setInterval、Promise、原生事件（JavaScript原生addEventListener直接添加的事件处理函数等）等异步操作中，同步执行

setStateAsync(state) {
return new Promise((resolve) => {
this.setState(state, resolve)
});
}

3. 在生命周期结束时会更新

三.setState渲染并不一定必须
setState会触发重新渲染，但是有很多重新渲染是没有必要的。

1. 新的state和原来的state是一样的，==》可以在shouldComponentUpdate()里进行设置。
2. 发生改变的state和渲染无关

四.并不是所有的组件状态都需要用 setState 来管理的

五.关于setState的推荐写法
个人感觉stackoverflow上这个讲解还是不错的（https://stackoverflow.com/questions/48209452/when-to-use-functional-setstate/48209870#48209870）
写法一：
this.setState({pictures: this.state.picture.concat(pics)})
and
写法二：
this.setState(prevState => ({
pictures: prevState.pictures.concat(pics)
}))
写法二更为推荐,可以解决setState无法保证同步执行的问题，另外，其他一些写法也可以解决setState无法同步执行的问题
e.g

this.setState.({state: true},() => console.log('change state')

六.setState的源码调用机制

1. setState通过队列机制实现state的更新，每次调用setState就会将需要更新的state放入队列，并不立即更新，提高更新的效率
2. 根据更新队列和 shouldComponentUpdate 来判断是否需要更新组件
   （1）

七.setState的嵌套赋值

this.state = {
    firstState: {
       secondState: 'secondStae',
       thirdState: 'thirdState'
    }
}

1. 方案一

this.setState(prevState => ({
     firstState: {
       ...prevState.firstState,
       secondState: 'secondState-change'
     }
}))

2.方案二

this.setState({
   firstState: {
     ...this.state.firstState,
     secondState: 'secondState-change'
  }
})

3. 方案三：Use Object.assign()

    this.setState({
        firstState: Object.assign({},this.state.firstState,{
            secondState: 'secondState-change'
        })
    })