4

我已经阅读了 reactjs.org 上关于 getDerivedStateFromProps 的文档。我看过用例。我明白为什么要使用它。

但我无法弄清楚它如何处理返回值。因此我的问题是，当它返回时......它去哪里了？

它没有设置状态，因为它无权访问它。

要设置状态，需要使用 componentDidUpdate 并查找更改，然后设置状态。

假设以下代码：

public static getDerivedStateFromProps: IArrowFunction = (nextProps: IMyContainerProps, prevState: IMyContainerState) => {
    if (nextProps.havingFun !== prevState.havingFun) {
        console.log('[MyContainer.tsx] getDerivedStateFromProps :::::CHANGED::::::', nextProps, prevState);
        return { havingFun: nextProps.havingFun };
    } else { return null; }
}

那么 React 对这个返回 ^ 做了什么？

然后我可以在 componentDidMount 上设置状态。但这似乎与 getDerivedStateFromProps 没有任何关系。此外，此生命周期方法每次都会触发。它会强制重新渲染。

public componentDidUpdate(prevProps: IMyContainerProps, prevState: IMyContainerState): void {
    if (prevState.havingFun !== this.props.havingFun) {
        console.log('[MyContainer.tsx] componentDidUpdate *******CHANGED******', prevState, prevProps, this.props);
        this.setState({ havingFun: this.props.havingFun });
    }
}

getDerivedStateFromProps 的返回在什么时​​候起作用？

更新：如果如上正确配置，此生命周期方法实际上将更新状态。您不需要额外的方法来设置状态

4

2 回答 2

4

返回值在概念上类似于 setState：

return { havingFun: nextProps.havingFun };

您可以在其中假设havingFun一个状态属性，并且该值nextProps.havingFun是更新值。

当你使用return null它时，意味着你没有对状态做任何事情。

注意：getDerivedStateFromProps 与 setState 的概念确实不同，尽管我在这里仅尝试以这种方式进行解释。

您应该阅读文档以获取更多详细信息：

getDerivedStateFromProps 在调用 render 方法之前被调用，无论是在初始挂载时还是在后续更新时。它应该返回一个对象来更新状态，或者返回 null 来更新任何内容。

于 2019-03-05T18:55:31.043 回答
2

当父组件重新渲染时，它会返回状态。

于 2019-03-05T18:52:07.373 回答