问题：

Question

问题：

我有一个容器（React.Component），它接收来自在redux-saga中执行的异步调用的数据。当数据存储到状态时，容器会更新，如ReactJS所预期的那样。数据将传递给两个使用数据呈现图表的子组件。问题是，当一个组件使用的数据发生更改时，整个视图会刷新，这意味着另一个组件会重新呈现。

代码：容器

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是进入组件的新属性。如果它们与组件中当前的那些相同，则不要设置State，因此不要重新渲染图表。

Answer 2

如果子组件都没有任何内部状态，只有props，则应使用新的PureComponent类来扩展子组件类。这将对传入的道具进行浅层检查，以确定您的子组件是否需要更新。所以：

class WeekChart extends React.PureComponent {...} class SocialChart extends React.PureComponent {...}

如果您想要更多手动控制重新渲染条件，则只需使用shouldComponentUpdate(nextProps, nextState)，在这种情况下，返回false 应该阻止更新组件（条件适用））。

您可以按照以下方式执行此操作：

shouldComponentUpdate(nextProps, nextState) { return this.props.somePropYouCareAbout !== nextProps.somePropYouCareAbout; }

请参阅docs

Answer 3

我喜欢使用PureComponent，因为它是出于这个原因而引入的。否则，没有理由担心这种重新渲染。你的组件没有任何改变，所以即使父组件重新渲染diff算法也不会看到任何变化，基本上只是跳过它。

我知道它可以是完美主义者的一种形式，所以让它不重新渲染是理想的，但这可能不是缓慢应用的罪魁祸首。

ReactJS：仅渲染子组件

问题：

代码：容器

代码：SocialChart（准系统）

代码：WeekChart（准系统）

的思考：

3 个答案: