reactjs – 在React中如何决定是否使用componentWillReceiveProps或componentWillMount?

前端之家收集整理的这篇文章主要介绍了reactjs – 在React中如何决定是否使用componentWillReceiveProps或componentWillMount?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
componentWillMount在第一次渲染时被调用一次

为后续渲染调用componentWillReceiveProps

所以 – 如果我想在组件被渲染的时候做一些动作(例如在商店中初始化一些数据)我在哪里放这个代码? – 这取决于从更高级别组件传入的道具.

问题是我不确定在调用第一个渲染时是否会初始化道具. (道具取决于异步数据).所以 – 我不能把代码放在componentWillMount中.但是,如果我将它放在componentWillReceiveProps中,然后在组件链中更高的位置进行更改,以便数据同步完成,那么我的代码就不会运行了componentWillReceiveProps.这篇文章的动机是我刚刚做到这一点,现在必须重构一堆组件.

似乎唯一的解决方案是将代码放在两种方法中.

没有生命周期方法总是被称为 – 第一次和随后.但是,您如何确定顶级组件中的数据是否必须在第一次渲染时可用?或者那个问题一定不是.或者也许你可以 – 但是你改变了这一点.

这种生活方式对我来说似乎非常脆弱.我错过了什么吗? (最有可能的).

您已经有了答案:将代码放在两种方法中.但是,我建议在两种方法中将道具转换为状态,并使用状态作为单一的事实来源.
componentWillMount () {
  this.checkAndUpdateState(this.props);
}

componentWillReceiveProps (nextProps) {
  this.checkAndUpdateState(nextProps);
}

checkAndUpdateState (props) {
  this.setState({ isLoaded: !!props.yourData });
}

猜你在找的React相关文章