Question

我最近想升级我对React的了解，所以我从组件生命周期方法开始。让我感到好奇的第一件事是componentWillReceiveProps。因此，文档说当组件接收新的（不一定更新的）道具时会被解雇。在该方法中，我们可以比较它们并在需要时保存到状态。

我的问题是：为什么我们需要该方法，如果该组件的道具更改（在父render内）将触发重新呈现此子组件？

Answer 1

一个常见的用例是响应更新的道具可能需要的状态（this.state）更新。

由于您不应尝试通过this.setState()函数中的render更新组件的状态，因此需要在componentWillReceiveProps中进行。

Answer 2

此外，如果某些道具被用作某些获取功能的参数，您应该在<g>中观察此道具，以使用新参数重新获取数据。

通常componentWillReceiveProps用作触发获取某些数据的方法的地方。但是，如果您的容器（例如，UserData未卸载并且您更改componentDidMount道具），则容器需要为相应的userId获取用户的数据。

userId

这不是一个完整的例子。让我们假设class UserData extends Component { componentDidMount() { this.props.getUser(this.props.userId); } componentWillReceiveProps(nextProps) { if (this.props.userId !== nextProps.userid) { this.props.getUser(nextProps.userId); } } render() { if (this.props.loading) { return <div>Loading...</div> } return <div>{this.user.firstName}</div> } }派遣Redux操作和Redux分配给组件getUser，user和loading道具。

Answer 3

它服务＆＃39;作为一个机会来对传入的道具做出反应，以便在渲染之前设置应用程序的状态。如果您在渲染后调用setState将无限重新渲染，这就是您不允许这样做的原因，因此您可以使用componentWillReceiveProps。

但是...... 你在混乱中超出了正确程度，所以事实上他们正在弃用它以及其他Will-lifecycle hook Discussion Deprecation。

如果没有大多数Will-lifecycle方法，还有其他方法可以实现您想要做的事情，一种方法是在渲染后不调用setState，只需在渲染（或任何地方）中直接使用新的传入道具创建你需要的有状态值，然后直接使用新值，然后你可以稍后设置状态以保留下一个迭代ex this.state.someState = someValue的引用，这将完成所有事情而不是重新渲染组件无限循环。

Answer 4

该组件的道具更改（在父级渲染内）将触发重新渲染此子组件

你是对的。如果需要对这些更改做出反应，则只需使用此方法。例如，您可能在子组件中具有使用多个道具计算的状态。

小例子：

class Test extends Component {
    state = {
        modified: "blank"
    };
    componentDidMount(){
        this.setState({
            modified: `${this.props.myProp} isModified`
        });
    }
    componentWillReceiveProps(nextProps) {
        this.setState({
            modified: `${nextProps.myProp} isModified`
        });
    }
    render() {
        return <div className="displayed">{this.state.modified}</div>
    }
}

在此示例中，componentDidMount使用this.props设置状态。当此组件收到新道具时，如果没有componentWillReceiveProps，则this.state.modified将永远不会再次更新。

当然，您可以在渲染方法中执行{this.props.myProp + "IsModified"}，但是当您需要更新道具更改componentWillReceiveProps时，this.state非常有用。

Answer 5

使用this作为通过使用this.setState（）更新状态来调用render（）之前对prop转换作出反应的机会。可以通过this.props访问旧道具。在此函数中调用this.setState（）不会触发额外的渲染。

看看这个article

Answer 6

componentWillReceiveProps将始终作为参数收到＆＃34; NxtProps＆＃34;，在componentWillReceiveProps之后调用render()。

有些人使用此方法使用此方法比较nxtProps和this.props，以检查是否应在组件调用render之前发生某些事情，以及某些验证。

查看react的文档，了解更多有关反应生命周期的信息！

希望这可以帮到你！

`componentWillReceiveProps`解释

6 个答案: