我一直在从事一个使用 React 编码的项目。我有一个组件集，我根据自己的要求实现了许多组件。其中许多都像一个复合组件。例如，TextBox 组件，有自己的标签、自己的错误消息机制和自己的输入过滤器 等等。此外，您知道，组件有 props 来管理某事。
每次更新我的组件 View (渲染)时，我都会使用 componentWillReceiveProps 并比较 props 的变化。
但是每次执行 componentWillReceiveProps 方法都是令人厌恶的。
有什么方法可以在不使用 componentWillReceiveProps 的情况下从上到下传递 props。我不想手动比较 Prop 变化。有没有办法自动完成。
当我更改父项中的 Prop 时，我想更新所有 View ，只是从上到下更改一些 Prop 值。
我不是 React 专家，性能也不是我的首要目标!
还有一件事，答案不是使用 Redux!
我正在等待您的创意方法和有用的想法。
最佳答案
如果没有看到您正在处理的特定事情的代码，我可能会遗漏一些关于您正在做的事情...
正如其他人评论的那样，如果提供了新的 Prop ，无论您是否实现 componentWillReceiveProps，React 都会重新渲染您的组件。 -- 实现它的唯一原因是进行某种特定的比较或根据新的 prop 值设置状态。
来自 React 文档(强调我的):
componentWillReceiveProps() is invoked before a mounted component receives new props. If you need to update the state in response to prop changes (for example, to reset it), you may compare this.props and nextProps and perform state transitions using this.setState() in this method.
Note that React may call this method even if the props have not changed, so make sure to compare the current and next values if you only want to handle changes. This may occur when the parent component causes your component to re-render.
换句话说，如果你有这样一个组件:
<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>
);
}
}
然后每次都有新的 Prop 传给<TextBox> , <Title>和 <Body>也将使用新的 text 重新渲染 Prop ，没有理由使用 componentWillReceiveProps如果您只是想更新 Prop 更改。 React 将自动查看更改并重新渲染。 React 会处理差异，并且应该相当有效地只重新呈现已更改的内容。
但是，如果您有一个单独的状态值需要设置以响应 props，例如，如果您希望在组件上显示“已更改”状态(或其他)，如果新的 props 不同，那么你可以实现 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；除非你从 Prop 设置组件状态，否则可能不需要通过 componentWillReceiveProps 运行新 Prop 。
2018 年 2 月更新:在未来的版本中，React 将弃用 componentWillReceiveProps赞成新getDerivedStateFromProps ，更多信息在这里:https://medium.com/@baphemot/whats-new-in-react-16-3-d2c9b7b6193b
关于javascript - 如何在不使用 React 中的 componentWillReceiveProps 的情况下处理 Prop 更改，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43372359/