getDerivedStateFromProps 是否实际更新状态？

Question

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

但我不知道它是如何处理 return 值的。因此我的问题是，它什么时候 return... 它去哪儿了？

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

要设置状态，需要使用 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 用它做什么 return ^?

然后我可以在 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 中的 return 在什么时候发挥作用？

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

Answer 1

父组件重新渲染时返回状态

Answer 2

return 值在概念上类似于 setState:

return { havingFun: nextProps.havingFun };

您可以假设 havingFun 状态属性并且值 nextProps.havingFun 是更新值。

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

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

您应该阅读 docs 了解更多详情：

getDerivedStateFromProps is invoked right before calling the render method, both on the initial mount and on subsequent updates. It should return an object to update the state, or null to update nothing.

getDerivedStateFromProps 是否实际更新状态？

Does getDerivedStateFromProps actually update state?

reactjs

getderivedstatefromprops