Tug*_*rul 3 javascript state reactjs redux
我一直在研究一个用React编码的项目.我有一个组件集,我为我自己的要求实现了许多组件.其中许多行为就像一个复合组件.例如,TextBox组件有自己的标签,自己的错误消息机制和自己的输入过滤器等.而且,你知道,组件有道具来管理......
每次更新我的组件视图(渲染),我使用componentWillReceiveProps和我比较道具的变化.
但每次实施该componentWillReceiveProps 方法都是如此令人厌恶.
有没有办法在不使用的情况下将道具从上到下传递componentWillReceiveProps.我不想手动比较道具变化.有没有办法自动完成.
当我更改父级中的道具时,我想更新所有视图,只是将一些道具值从上到下更改.
我不是反应专家,性能也不是我的第一个目的!
还有一件事是答案不是use Redux!
我正在等待你的创意方法和有用的想法.
Ben*_*son 11
如果没有看到您正在处理的特定事物的代码,我可能会错过一些关于您正在做的事情......
正如其他人所评论的那样,如果提供了新的道具,React将重新渲染你的组件,无论你是否实现componentWillReceiveProps- 实现它的唯一原因是进行某种特定的比较或根据新的prop值设置状态.
从React docs(强调我的):
在安装的组件接收新的props之前调用componentWillReceiveProps().如果您需要更新状态以响应prop更改(例如,重置它),您可以比较this.props和nextProps并使用此方法中的this.setState()执行状态转换.
请注意,即使道具没有更改,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道具重新渲染,componentWillReceiveProps如果您只是想要使用道具更改进行更新,则没有理由使用.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; 除非你从道具设置组件状态,否则可能不需要运行新的道具componentWillReceiveProps
更新2018年2月:在未来的版本中,React将弃用componentWillReceiveProps新的getDerivedStateFromProps更多信息:https://medium.com/@baphemot/whats-new-in-react-16-3-d2c9b7b6193b