如果没有看到您正在处理的特定事情的代码,我可能会遗漏您正在做的事情......
正如其他人评论的那样,如果提供了新的 props,React 将重新渲染您的组件,无论您是否实现 componentWillReceiveProps - 实现它的唯一原因是进行某种特定的比较或设置基于新道具值的状态。
来自 React 文档(重点是我的):
componentWillReceiveProps() 在一个挂载的组件接收到新的 props 之前被调用。 如果您需要更新状态以响应 prop 更改(例如,重置它),您可以比较 this.props 和 nextProps 并在此方法中使用 this.setState() 执行状态转换。
请注意,即使 props 没有更改,React 也可能会调用此方法,因此如果您只想处理更改,请确保比较当前值和下一个值。当父组件导致您的组件重新渲染时,可能会发生这种情况。
换句话说,如果你有这样的组件:
<TextBox title={"Foo"} content={"Bar"} />
这在内部将 prop 更改传递给几个子组件,例如:
class TextBox extends React.Component {
render() {
return (
<div className={'text-box'}>
<Title text={this.props.title} />
<Body text={this.props.content} />
</div>
);
}
}
然后每次将新道具传递给<TextBox>,<Title> 和<Body> 也将使用新的text 道具重新渲染,如果您只是希望通过道具更改进行更新。 React 将自动查看更改并重新渲染。 React 处理 diffing 并且应该相当有效地仅重新渲染已更改的内容。
但是,如果您有一个单独的状态值需要设置以响应道具,例如,如果您想在新道具不同的情况下在组件上显示“更改”状态(或其他),那么你可以实现componentWillReceiveProps,比如:
class TextBox extends React.Component {
componentWillReceiveProps(nextProps) {
if (this.props.content !== nextProps.content) {
this.setState({changed: true});
}
}
render() {
const changed = this.state.changed ? 'changed' : 'unchanged';
return (
<div className={`text-box ${changed}`}>
<Title text={this.props.title} />
<Body text={this.props.content} />
</div>
);
}
}
如果您想防止在不需要性能的情况下重新渲染,请按照 Andrey 的建议进行操作并使用 shouldComponentUpdate: https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate
TLDR;除非你从 props 设置组件状态,否则可能不需要通过componentWillReceiveProps运行新的 props
2018 年 2 月更新:在未来的版本中,React 将弃用 componentWillReceiveProps 以支持新的 getDerivedStateFromProps,更多信息请点击此处:https://medium.com/@baphemot/whats-new-in-react-16-3-d2c9b7b6193b