在父状态更改后更新子组件

Question

这个问题已经回答了here，但事情总是在变化。

componentWillReceiveProps 现已弃用，很快就会被删除。
那么，当父组件需要获取一些数据时，更新子组件最简洁的方法是什么？

有关详细信息，请参阅旧问题。
谢谢

更新：

基本上，父组件获取一些数据，而子组件需要这些数据。

这是子组件。

class Dropdown extends React.Component {
constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
}


// This is deprecated so need to be replaced by your answer
componentWillReceiveProps(nextProps) {
    this.setState({
        value: nextProps._layouts[0]
    });
}


handleChange(event) {
    this.setState({
        value: event.target.value
    });
}

render() {
    // The options for the dropdown coming from the parent
    const options = this.props._layouts.map((number) =>
        React.createElement("option", null, number)
    )

    // This logs the value coming from the parent
    // A timeout is needed since fetch is asynchronous
    setTimeout(() => {
        console.log(this.state.value)
    }, 400);

    // This is just a dropdown menu
    return React.createElement("div",
        null, React.createElement("span", {
            class: "custom-dropdown"
        }, React.createElement("select", {
            onChange: this.handleChange,
        }, options)));
    }
}

Answer 1

如果 props 或 state 在父级中更改，您可以使用 shouldComponentUpdate(nextProps,nextState) 并返回 true。

More info in the react documentation

Answer 2

替换componentWillReceiveProps 的生命周期方法是static getDerivedStateFromProps。 （实际上这并不完全正确，但是您可以使用它达到相同的结果）
该函数是静态的，接收组件的 state 和 props，并返回一个新的对象合并到组件的 state 中。

但真正的问题是 - 你真的需要它吗？上述问题的答案（略有调整）：

getDerivedStateFromProps(nextProps) {
  return nextProps.data;
}

什么都不做。您也可以使用道具而不是状态。
正如 React 文档所说：

此方法适用于状态取决于道具随时间变化的罕见用例。