reactjs - React 16.4 中的 getDerivedStatefromProps 不会导致状态更改

Question

我不确定当前的行为是否正确。

在 16.3 中，当我有一个通过 props 接收其状态的组件时，我成功地使用了 getDerivedStateFromProps，使用所述函数检查 props 和状态(或者更简洁地说 prevState 和 nextProps)就可以了。当新的 props 出现时，它更新了状态，并且状态的更改正常工作。

现在在 16.4 中，因为对 setState 的调用也会触发 getDerivedStateFromProps，所以我看到了意外的结果。它所比较的​​状态已经更新为新状态(逻辑上？)，但由于 props 或 nextProps 保持不变，我的比较更新为当前设置的 props。这些在逻辑上没有改变，因为我只改变了状态。因此，我对设置状态的调用现在失败了。也许我做错了？也许它应该与调用 setState 之前的状态进行比较？这是我所期望的，并且可以解决问题，因为之前的真实状态将与 Prop 匹配，并且不会发生任何变化。

这是一个例子: https://jsfiddle.net/rjacks24/1yupwngv/

 class Example extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        stopped: this.props.stopped || false
    };

    this.wasToggled = false;
    this.toggleStop = this.toggleStop.bind(this);
}

static getDerivedStateFromProps(nextProps, prevState) {
    if (prevState.stopped !== nextProps.stopped) {
        return { stopped: nextProps.stopped };
    }
    return null;
}

/**
 * function to handle the stop of the antenna
 * @returns {void}
 */
toggleStop() {
    this.wasToggled = !this.wasToggled;
    this.setState({
        stopped: !this.state.stopped
    });
}

render() {
    return (
        <div>
            <button
                type="button"
                onClick={this.toggleStop}
                className={this.state.stopped ? "done" : ""}
            >
                Toggle
            </button>
            State Toggled? {this.state.stopped ? "yes" : "no"}
            <div>
                But Actually... wasToggled: {this.wasToggled ? "yes" : "no"}{" "}
            </div>
        </div>
    );
}
}

预期的行为是通过删除 getDerivedStateFromProps() 的代码块获得的行为，但是，从 heigher 到 props 的更新不会按照应有的方式进行处理。

如果我做错了，我很抱歉，但由于我在 16.3 中表现很好，如果认为它至少值得提出来进行讨论。这个人似乎正在经历同样的事情，但我的例子更简单一些:Proper use of React getDerivedStateFromProps

我的猜测是，在这些情况下，正确的方法是始终处理 HOC 上的状态，然后调用 gdsfp 不是问题。

tldr； 16.3 让我在使用 getdrivenStateFromProps 时更改状态，16.4 不允许。

Answer 1

然后就出现了这个。今天。 https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html