ReactJS:仅渲染子组件

Question

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 开发人员来说可能是微不足道的。

Answer 1

如果您只希望子组件在其数据更改时重新呈现，则应在子组件内从 componentWillReceiveProps() 生命周期方法调用 setState。

你的子组件应该是这样的；

componentWillReceiveProps(nextProps) {
    if(nextProps !== this.props) {
        this.setState({yourState: nextProps.yourProperty});
    } else {
        do nothing
    }

}

这将阻止您的组件重新渲染，除非它接收到新数据。 nextProps 是进入组件的新属性。如果它们与当前在组件中的相同，则不要设置状态，因此不要重新渲染图表。