javascript - 功能性 setState 和 props

Question

我很清楚为什么我们需要函数式 setState 以及它是如何工作的，例如

this.setState((prevState, props) => ...);

您可以像上面那样获取先前的状态作为参数。

但是也要注意参数中的 props。 Here我在函数式 setState 中遇到了关于 props 的解释:

In addition, it also applies when the update depends on props. These can become stale as well when the received props from the parent component have changed before the asynchronous execution kicks. Therefore, the function in this.setState() gets as second argument the props.

但是我仍然不明白这个解释。

有人可以举例说明“ Prop ”如何变得陈旧吗？例如可能是一个代码片段，它在使用 this.props 而不是 setState 接受的回调函数的参数中指定的“props”时演示了一个错误？

换句话说，我不明白为什么在函数式 setState 中需要 props 参数，很高兴看到为什么需要它的示例。

Answer 1

class Children extends React.Component {
  state = {
    initial: true,
  };

  onClick = () => {
    this.props.handler();
    console.log(this.state.initial, this.props.initial); // true true
    this.setState((state, props) => {
      console.log(state.initial, props.initial); // true false
      console.log(this.state.initial, this.props.initial); // true true
    });
  };
  render() {
    console.log("render children", this.state.initial, this.props.initial);
    return <div onClick={this.onClick}>Click me</div>
  }
}

class Hello extends React.Component {
  state = {
    initial: true,
  };

  handler = () => {
    this.setState({initial: false});
  }
  render() {
    console.log("render parent", this.state.initial);
    return <Children initial={this.state.initial} handler={this.handler} />
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

在这个例子中， children 将调用将改变父状态并更新他自己的状态的处理程序。在回调中，您可以看到 props 和 this.props 不同:props 是新值，而 this.props 是旧值。

Demo here