Question

我正在https://reactjs.org/docs/state-and-lifecycle.html检查ReactJS教程并且在以下方面感到困惑：当我们想要根据以前的状态更新当前状态时，我们应该调用一个带有函数的setState变体

this.setState(function(prevState, props) {
  return {
    counter: prevState.counter + props.increment
  };
});

现在我的问题是谁将使用之前的状态调用此函数？就像我们直接用值调用setState一样，我们知道我们已经触发了将状态设置为value的工作流。但是在这种情况下，谁将调用此方法以及它如何知道要传递的参数是什么，因为这是一个动态方法？

Answer 1

Intent函数将调用该函数。

例如 （不是他实际的setState函数只是为了显示概念）

setState

Answer 2

setState

的当前签名

setState（{state_name：value}）
setState（nextState，callback）
setState（回调）

使用setState

无法保证this.state会立即更新，所以调用此方法后访问this.state可能会返回旧的值。因为React可能会将多个setState()调用批处理为单个更新以提高性能。

<强> e.g。以下是错误的，因为无法保证this.state.counter更新一次。

assuming count=1 initially.

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

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

counter =1 and not 3 as

可以安全地假设setState是异步的。

要修复它，请使用其他形式的setState()接受函数（回调）而不是对象

当向setState提供函数时，React将在某个时刻被调用未来（不同步）。它将与最新的一起调用组件参数（state, props, context）。

使用第三个签名

assuming count=1 initially.

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

counter = 3

Reactjs中的setState实现

2 个答案: