Reactjs `组件将接受Props的解释

我最近想升级我的知识，所以我从组件生命周期方法开始。首先让我好奇的是这个。所以，文档中说，当组件接收到新的（不一定是更新的）道具时，就会触发它。在该方法中，我们可以比较它们并在需要时保存到状态

---

我的问题是：如果该组件的道具（在父级

渲染

）中的更改将触发该子组件的重新渲染，那么为什么我们需要该方法？

一个常见的用例是状态（

this.state

）更新，这可能是响应更新的道具所必需的

由于您不应尝试通过

render

函数中的

this.setState（）

更新组件的状态，因此这需要在

componentWillReceiveProps

中发生

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

你完全正确。只有在需要对这些更改做出反应时，才需要使用此方法。例如，子组件中可能有一段状态，该状态是使用多个道具计算的

小例子：

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.myProp}已修改`
});
}
组件将接收道具（下一步）{
这是我的国家({
修改：`${nextrops.myProp}已修改`
});
}
render（）{
返回{this.state.modified}
}
}

在本例中，

componentDidMount

使用

this.props

设置状态。当此组件收到新的道具时，如果没有

组件将收到道具
，
此.state.modified
将不会再次更新

当然，您可以在render方法中执行
{this.props.myProp+“IsModified”}
，但是
componentWillReceiveProps
在需要更新
this.state
属性更改时非常有用

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

看看这个组件willreceiveprops
将始终作为参数“
nxtrops
”接收，
组件willreceiveprops
在
渲染（）之后调用

有些人使用此方法来比较
nxtrops
和
this.props
以检查组件调用
渲染之前是否发生了什么，并进行一些验证

查看react的文档以了解有关react生命周期的更多信息

希望这能帮助你
 此外，如果某个道具被用作某个提取函数的参数，您应该在
componentWillReceiveProps
中查看该道具，以使用新参数重新提取数据

通常，
componentDidMount
用作触发方法获取某些数据的位置。但是，如果您的容器（例如，UserData）没有卸载，并且您更改了
userId
prop，则容器需要为相应的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>
    }
  }

class用户数据扩展组件{
componentDidMount（）{
this.props.getUser（this.props.userId）；
}
组件将接收道具（下一步）{
if（this.props.userId！==nextrops.userId）{
this.props.getUser（nextrops.userId）；
}
}
render（）{
如果（本道具装载）{
返回加载。。。
}
返回{this.user.firstName}
}
}

这不是一个完整的工作示例。让我们假设
getUser
分派Redux操作，并将Redux分配给组件
user
，
加载
和
getUser
道具
 它“提供”了一个机会，可以对传入的道具做出反应，在渲染之前设置应用程序的状态。如果在渲染后调用setState，则将无限地重新渲染，这就是为什么不允许这样做，因此可以使用componentWillReceiveProps

但是…你的困惑是不正确的，所以事实上他们在反对它，其他人也会反对


还有其他方法可以在不使用大多数Will lifecycle方法的情况下实现您想要的功能，一种方法是在渲染后不调用setState，只需在渲染中（或任何地方）直接使用新的传入道具来创建所需的有状态值，然后直接使用新值，然后，您可以稍后设置state以保留下一次迭代的引用，例如：
this.state.someState=someValue
，这将完成所有操作，并且不会在无限循环中重新渲染组件
但是
构造函数
方法如何？我们在那里合成状态，因此下次当组件道具在父级
呈现
函数中更改时，组件将重新呈现，构造函数将再次执行？否，构造函数将仅在组件实例初始创建时执行。另请参见：；）