15.React学习笔记.setState内容补充

1. setState数据的合并

• setState改变state中的部分属性，并不会覆盖原有的属性，回溯源码ReactUpdateQueue中的processUpdateQueue，getStateFromUpdate方法中。
• 调用的实际是如下方法：

    Object.assign({},this.state, {message:"你好啊,wec"})

image.png

• 实际上内部将更改过的属性和原属性做了个合并+拷贝。

2. setState本身的合并

  increment() {
    // 1. setState本身被合并
    this.setState({
      counter: this.state.counter + 1
    });
    this.setState({
      counter: this.state.counter + 2
    });
    this.setState({
      counter: this.state.counter + 1
    });
  }

• setState在内部会合并成一个对象。
• 在源码getstateFromUpdate()方法中通过do-whild循环对setState进行合并。

3. 但我想setState合并时进行累加

  increment() { 
// 2. setState合并时进行累加
    this.setState((preState,props) => {
      return {
        counter: preState.counter + 1
      }
    });
    this.setState((preState,props) => {
      return {
        counter: preState.counter + 1
      }
    });
    this.setState((preState,props) => {
      return {
        counter: preState.counter + 1
      }
    });
  }

• 通过传入函数来达成
• 原因在于执行getStateFromUpdate方法的时候，执行方式不一样，相应源码中UpdateState情况下，对payload进行判断，若为函数则执行该函数：后一次执行会把前一次累加过的值传入。

partialState = payload.call(instance, prevState, nextProps);

• 这样我们就可以分情况（累加/合并）使用setState了。