第一点

可以将 setState 函数的 prevState 参数视​​为可变的吗？

答案是不，你永远不应该改变prevState，这在 setState 部分的react文档中也有明确提到

• prevState 是对前一个状态的引用。它不应该被直接变异。相反，更改应该通过基于来自 prevState 和 props 的输入构建一个新对象来表示。

第二点：

你测试过prevState，this.state它们是一样的，实际上它们不是。

要弄清楚为什么它们实际上不同，我们需要知道为什么prevState实际存在，答案是该setState函数是异步的，这就是为什么 react js 允许我们访问prevState以下示例，其中prevState != this.state

在下面的例子中，我们每次点击都会增加计数器两次，但是我们将使用 2 个setState操作，每个操作都会将计数器增加 1。

因为setState是async你会发现，第二setState操作开始之前先setState完成这就是prevState是有用的，在这里prevState和this.state不相等。

我用一个数字注释了每一行，表示该行何时执行，这应该解释了我们为什么需要prevState以及为什么它与this.state.

class App extends React.Component{
  constructor(props)
  {
    super(props);
    this.state = {
      counter : 1
    };
  }

  increment = () =>{
    this.setState((prevState , props) => {
      console.log("in first"); //3
      console.log(prevState);  //3
      console.log(this.state); //3
      if(prevState == this.state)
      {
         console.log("in first prevState == this.state");
      }
      return {
        counter : prevState.counter+1
      }
    } , ()=>{
      console.log("done updating first"); //5
    });


    console.log("after first"); //1

    this.setState((prevState, props) => {
      console.log("in second"); //4
      console.log(this.state);  //4
      console.log(prevState);   //4
      if (prevState == this.state) {
        console.log("in second prevState == this.state");
      }
      return {
        counter: prevState.counter + 1
      }
    } , () =>{
      console.log("done updating second"); //6
    });

    console.log("after second"); //2

  }

  render(){
    return (
      <div>
        <span>{this.state.counter}</span>
        <br/>
        <button onClick={this.increment} >increment</button>
      </div>
    )
  }
}

上面代码的结果是

"after first"
"after second"
"in first"
▶Object {counter: 1}
▶Object {counter: 1}
"in first prevState == this.state"
"in second"
▶Object {counter: 1}
▶Object {counter: 2}
"done updating first"
"done updating second"

上面的代码在这个链接中是完全有效的，你可以查看console.log结果 https://codesandbox.io/s/k325l485mr

上面的例子每次点击都会正确增加计数器两次，如果你想打破它，请在第二次更改 return 语句 setState

从

return {
    counter: prevState.counter + 1
}

到

return {
    counter: this.state.counter + 1
}

你会发现结果不正确，每次点击都会导致 1 个增量，这是不正确的，因为我们有 2 个setState，这是因为我们没有使用prevState，我们使用了不正确的this.state

最后

我相信更新计数器的正确方法是

this.setState((prevState) => ({ counter: prevState.counter + 1 }));