getDerivedStateFromProps实际上更新状态

Question

我已经阅读了有关getDerivedStateStateFromprops的文档。我看过用例。我明白为什么要使用它。

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

它没有设置，因为它无法访问此。

要设置状态，需要使用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; }
}

那么对该返回 ^？

的反应有什么作用

我可以在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发挥作用？

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

Answer 1

返回值在setState之类的概念中相似：

return { havingFun: nextProps.havingFun };

您可以假设havingFun一个状态属性和值nextProps.havingFun更新值。

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

注意：getDerivedStateFromProps与SetState确实不同，尽管我在这里尝试以此方式解释它。

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

getDerivedStateFromprops在调用渲染方法之前，在初始安装座和后续更新上都调用。它应该返回一个对象以更新状态或null以更新任何更新。

Answer 2

当父组件重新租赁时，它已返回状态。