Reactjs 为什么调用react-setState方法不'；你不能马上改变状态吗？

我正在阅读文档的一节，并尝试用这段代码演示

onChange

用法（）

var React=require（'React'）；
var ControlledForm=React.createClass({
getInitialState:函数（）{
返回{
值：“初始值”
};
},
handleChange:函数（事件）{
console.log（this.state.value）；
this.setState（{value:event.target.value}）；
console.log（this.state.value）；
},
render:function（）{
返回(
);
}
});
反应(
,
document.getElementById（'mount'）
);

当我在浏览器中更新

值时，

handleChange

回调中的第二个

console.log

会打印与第一个

console.log

相同的

值，为什么我看不到
this.setState（{value:event.target.value}）的结果
在React的
handleChange
回调范围内
：

setState（）
不会立即改变此.state，但会创建一个
等待状态转换。调用此函数后访问此.state
方法可能返回现有值。没有
保证对
setState
的调用和调用的同步操作
为提高性能而进行批处理

如果希望在状态更改发生后执行函数，请将其作为回调传入

this.setState({value: event.target.value}, function () {
    console.log(this.state.value);
});

如React文档中所述，无法保证同步触发
setState
，因此您的
console.log
可能会在更新之前返回状态

Michael Parker提到在
setState
中传递回调。状态更改后处理逻辑的另一种方法是通过
componentdiddupdate
lifecycle方法，这是React文档中推荐的方法

通常，我们建议对此类逻辑使用componentDidUpdate（）

当可能会连续触发
setState
s，并且您希望在每次状态更改后触发相同的函数时，这一点特别有用。不必向每个
setState
添加回调，您可以将函数放在
componentdiddupdate
中，必要时将特定逻辑放在其中

// example
componentDidUpdate(prevProps, prevState) {
  if (this.state.value > prevState.value) {
    this.foo();  
  }
}

注意反应生命周期方法





我工作了几个小时才发现每次
setState（）
之后都会调用
getDerivedStateFromProps

您可以尝试使用ES7异步/等待。例如，使用您的示例：

handleChange: async function(event) {
    console.log(this.state.value);
    await this.setState({value: event.target.value});
    console.log(this.state.value);
}

async await
语法非常适用于以下内容

changeStateFunction = () => {
  // Some Worker..

  this.setState((prevState) => ({
  year: funcHandleYear(),
  month: funcHandleMonth()
}));

goNextMonth = async () => {
  await this.changeStateFunction();
  const history = createBrowserHistory();
  history.push(`/calendar?year=${this.state.year}&month=${this.state.month}`);
}

goPrevMonth = async () => {
  await this.changeStateFunction();
  const history = createBrowserHistory();
  history.push(`/calendar?year=${this.state.year}&month=${this.state.month}`);
}

简单地说-this.setState（{data:value}）在中是异步的
这意味着它从调用堆栈中移出，只会返回
除非已解析，否则将调用堆栈

请阅读有关事件循环的内容，以清楚了解JS中的异步性质以及更新需要时间的原因-


因此—

    this.setState({data:value});
    console.log(this.state.data); // will give undefined or unupdated value

因为更新需要时间。
要实现上述过程——

    this.setState({data:value},function () {
     console.log(this.state.data);
    });

回答得好。我需要做的观察是小心使用valueLink。如果您不必格式化/屏蔽输入，则效果很好。您可能还需要签出
componentdiddupdate
。它将在状态更改后被调用。快速提问，如果可以的话，我看到一旦我们将我们需要的函数作为回调传递给setState，我希望在调用render（）之前首先执行func。但是我看到顺序是setState（）->render（）->setStates'callback（）。这正常吗？如果我们想根据回调中的操作控制渲染，该怎么办？shouldComponentUpdate？更改组件的状态将始终触发重新渲染，除非
shouldComponentUpdate
中有其他指定的行为。在重新渲染之前，您希望在传递给
setState
的回调中执行哪些操作？…为什么？有人能证明这一点吗？您的答案与其他高质量答案有什么不同？另一个答案是关于在setState（）中使用回调的。我想我把这个放在这里是为了那些回调用例不适用的人。例如，当我自己面对这个问题时，我的用例涉及在设置更新状态之后立即在更新状态上切换。因此，使用async/await比使用回调更可取。如果我总是在更新某些状态时使用await always，然后等待它更新，这会影响性能吗？如果我把多个wait setState放在一个链中，一个在另一个链的下面，它会在每次setState更新后呈现吗？或者在上一次setState更新之后，根据您询问用户2774480的内容，我相信这一切都可以归结为特定的用例来确定要使用哪个实现。如果在一个链中使用多个setState，性能将受到影响，是的，它将在每个setState之后呈现，但如果我错了，请纠正我。您的评论挽救了我的时间：DIf您正在使用挂钩，请查看。
    this.setState({data:value},function () {
     console.log(this.state.data);
    });