Javascript 反应：this.state vs.setState

情景1：

const { foo } = this.state;

情景2：

this.setState(({ foo }) => { ... });

---

foo

是否保证这两种情况相同？或者

setState

是否会运行async并根据其他

setState

s返回不同的值？

当您在使用

this.setState

后立即访问状态时，状态可能是State，因为

this.setState

是

async

如果需要基于更新的状态进行计算，即（在调用

此.state

之后），可以使用该方法的第2个参数，该参数是在提交状态更改后触发的回调

this.setState(updateState, () => {
   const { foo } = this.state;

   console.log(foo); // updated foo
});

function updatedState({ foo }) { 
    // you can be sure that `foo`
    // is from the previous state 
    // before setState is called
}

---

setState

是异步的，从状态中提取值以在

setState

中使用可能会导致错误<代码>设置状态可以接受多个参数。它可以只接受一个新状态，一个接受旧状态+道具并返回新状态、新状态和设置新状态后要运行的函数的回调，或者一个组合。例如：

this.setState(
  // function taking previous state + props,
  // which should return updated state.
  // this could also just be an object with
  // the new state, if you don't need to rely
  // on previous state.
  (previousState, props) => {
    if (previousState.something) {
      return { something: somethingElse }
    } else {
      return { something: anotherThing }
    }
  }, () => {
    // safe to use new state here,
    // since state has been updated.
    // but it's recommended to use
    // componentDidUpdate instead!
  })

如上所述：

setState（）并不总是立即更新组件。可能 批处理或将更新推迟到以后。这使得阅读成为一种状态 就在调用setState（）之后，这是一个潜在的陷阱。相反，使用 componentDidUpdate或设置状态回调（设置状态（更新程序、， 回调），其中任何一个都保证在更新后触发 已应用

因此，我们可以使用setState的第二个参数来传递一个回调，在那里执行我们的逻辑，这取决于foo的更新值。然而，您最初的问题是

const{foo}中foo的值是否=this.state

和

this.setState（（{foo}）=>{…}）中foo的值是相同的

为了检查这一点，我们可以比较执行一个
setState，然后执行
，然后执行另一个
setState（第二个将只记录foo的值，而不是对其进行突变）。请参阅以下代码段：


类示例扩展了React.Component{
构造函数（）{
超级（）；
此.state={
傅:0,，
boo:0
}
}
handleClickSetState=（）=>{
this.setState（（{foo}）=>（{foo:foo+1}））；
this.setState（（{foo}）=>console.log（“inside setState.foo:，foo））；
}
handleClickState=（）=>{
this.setState（（{boo}）=>（{boo:boo+1}））；
log（“外部setState.boo:，this.state.boo”）
}
render（）{
返回
测试状态
测试设置状态
}
}
render（，document.getElementById（“根”））