javascript - 哪种 React 生命周期方法可以很好地替代 componentWillRecieveProps？

Question

我听说过 getDerivedStateFromProps，但它并没有按照我想要的方式工作。

我有这个代码:

class App extends Component {
    static getDerivedStateFromProps(props, state) {
        console.log("Get derived state from props called");
        return null;
    }

    render() {
        return (
            <button onClick={() => this.setState({})}>Change State</button>
        );
    }
}

单击按钮调用 getDerivedStateFromProps。这不是我需要的。我想要一个仅在收到新 Prop 时调用的函数。当内部状态发生变化时，不应调用此函数。

我打算在模态表单场景中使用它。当组件接收到一个对象作为 prop 时，组件应该将这个对象转换成一种形式，然后将该形式放入状态中。如果我使用 getDerivedStateFromProps，因为它在每个 this.setState() 中被调用，它不会反射(reflect)表单中的变化，因为每当用户键入时，一个 this.setState() 被触发，而不是将更改设置到状态中，而是初始对象。

我应该使用哪种 React 生命周期方法？

Answer 1

根据不同的用例，有几种方法可以解决这个问题。

1. 如果添加了新的 props，可以在 Child 组件中检查这些新的 props，如果新对象存在，可以调用用户定义的函数。
2. getDerivedStateFromProps(props, state, prevProps) 是一个静态方法并且 this 不存在于同一个，这意味着你必须返回一个基于状态的在各种条件下。也就是说，让它在大多数情况下默认工作。在您想要更改其功能的情况下，进行检查并返回修改后的状态。

希望它能回答:)