对setState简单的理解~~

为什么使用setState

以一下栗子讲解：

import React, { Component } from 'react'

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      message: "Hello World"
    }
  }

  render() {
    return (
      <div>
        <h2>{this.state.message}</h2>
        <button onClick={e => this.changeText()}>改变文本</button>
      </div>
    )
  }

  changeText() {
  }
}

关键是changeText中应该如何实现：
我们是否可以通过直接修改state中的message来修改界面呢？

• 点击不会有任何反应，为什么呢？
• 因为我们修改了state之后，希望React根据最新的State来重新渲染界面，但是这种方式的修改React并不知道数据发生了变化；
• React并没有实现类似于Vue2中的Object.defineProperty或者Vue3中的Proxy的方式来监听数据的变化；
  我们必须通过setState来告知React数据已经发生了变化；

 changeText() {
    this.state.message = "你好啊,react";
  }

我们必须通过setState来更新数据：

• 疑惑：在组件中并没有实现setState的方法，为什么可以调用呢？
• 原因很简单，setState方法是从Component中继承过来的。

//源码中的讲解
Component.prototype.setState = function(partialState, callback) {
  invariant(
    typeof partialState === 'object' ||
      typeof partialState === 'function' ||
      partialState == null,
    'setState(...): takes an object of state variables to update or a ' +
      'function which returns an object of state variables.',
  );
  this.updater.enqueueSetState(this, partialState, callback, 'setState');
};

所以，我们可以通过调用setState来修改数据：

• 当我们调用setState时，会重新执行render函数，根据最新的State来创建ReactElement对象；
• 再根据最新的ReactElement对象，对DOM进行修改；

changeText() {
  this.setState({
    message: "你好啊,react"
  })
}

setState异步更新

changeText() {
  this.setState({
    message: "你好啊,react"
  })
  console.log(this.state.message); // Hello World
}

上面代码修改执行：最终打印结果是Hello World；

可见setState是异步的操作，我们并不能在执行完setState之后立马拿到最新的state的结果

为什么setState设计为异步呢？
setState设计为异步，可以显著的提升性能；

• 如果每次调用 setState都进行一次更新，那么意味着render函数会被频繁调用，界面重新渲染，这样效率是很低的；
• 最好的办法应该是获取到多个更新，之后进行批量更新；
  如果同步更新了state，但是还没有执行render函数，那么state和props不能保持同步；
• state和props不能保持一致性，会在开发中产生很多的问题；
  那么如何可以获取到更新后的值呢？
• setState接受两个参数：第二个参数是一个回调函数，这个回调函数会在更新后会执行；
• 格式如下：setState(partialState, callback)

changeText() {
  this.setState({
    message: "你好啊,react
  }, () => {
    console.log(this.state.message); // 你好啊,react
  });
}


//我们也可以在生命周期函数：

componentDidUpdate(prevProps, provState, snapshot) {
  console.log(this.state.message);
}

setState不一定是异步的

1. 在setTimeout中的更新：

changeText() {
  setTimeout(() => {
    this.setState({
      message: "你好啊,react"
    });
    console.log(this.state.message); // 你好啊,react
  }, 0);
}

2. 原生DOM事件：

componentDidMount() {
  const btnEl = document.getElementById("btn");
  btnEl.addEventListener('click', () => {
    this.setState({
      message: "你好啊,李银河"
    });
    console.log(this.state.message); // 你好啊,李银河
  })
}

其实分成两种情况：

• 在组件生命周期或React合成事件中，setState是异步；
• 在setTimeout或者原生dom事件中，setState是同步；

setState的合并

1. 数据的合并

this.state = {
  name: "coderwhy",
  message: "Hello World"
}

如果我们需要更新message：

• 我通过setState去修改message，是不会对name产生影响的；

changeText() {
  this.setState({
    message: "你好啊,李银河"
  });
}

为什么不会产生影响呢？源码中其实是有对 原对象 和 新对象进行合并的：

• 事实上就是使用 Object.assign(target, …sources) 来完成的；

2. 多个setState合并
   比如我们还是有一个counter属性，记录当前的数字：

• 如果进行如下操作，那么counter会变成几呢？答案是1；
• 为什么呢？因为它会对多个state进行合并；

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

    this.setState({
      counter: this.state.counter + 1
    });

    this.setState({
      counter: this.state.counter + 1
    });
  }

其实在源码的processUpdateQueue中有一个do…while循环，就是从队列中取出多个state进行合并的；

如何可以做到，让counter最终变成3呢？

increment() {
  this.setState((state, props) => {
    return {
      counter: state.counter + 1
    }
  })

  this.setState((state, props) => {
    return {
      counter: state.counter + 1
    }
  })

  this.setState((state, props) => {
    return {
      counter: state.counter + 1
    }
  })
  }

为什么传入一个函数就可以变出3呢？

• 原因是多个state进行合并时，每次遍历，都会执行一次函数：