ReactJS 的新手。使用 mxstbr/react-boilerplate .
问题:
我有一个容器 (React.Component),它从 redux-saga 中执行的异步调用接收数据。当数据存储到状态中时,容器会更新,正如 ReactJS 所预期的那样。数据被传递给两个不同的子组件,它们使用数据来呈现图表。问题在于,当一个组件使用的数据发生变化时,整个 View 都会刷新,这意味着另一个组件会重新呈现。
代码:容器
export class Social extends React.Component {
render() {
return (
<div>
<SocialChart data={this.props.socialData} />
<WeekChart data={this.props.weekData} />
</div>
)
}
}
代码:SocialChart(准系统)
class SocialChart extends React.Component {
render() {
return (
<p>Social Chart</p>
);
}
}
代码:WeekChart(准系统)
class WeekChart extends React.Component {
render() {
return (
<p>WeekChart Chart</p>
);
}
}
想法:
也许我需要在 shouldComponentUpdate()
或其他生命周期方法之一中做一些事情。我真的不确定。该解决方案对于经验丰富的 ReactJS 开发人员来说可能是微不足道的。
最佳答案
如果您只希望子组件在其数据更改时重新呈现,则应在子组件内从 componentWillReceiveProps() 生命周期方法调用 setState。
你的子组件应该是这样的;
componentWillReceiveProps(nextProps) {
if(nextProps !== this.props) {
this.setState({yourState: nextProps.yourProperty});
} else {
do nothing
}
}
这将阻止您的组件重新渲染,除非它接收到新数据。 nextProps 是进入组件的新属性。如果它们与当前在组件中的相同,则不要设置状态,因此不要重新渲染图表。
关于ReactJS:仅渲染子组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40391467/