当父状态改变时如何防止子组件重新加载答案

【问题标题】：how to prevent child component from reload when the parent state is change当父状态改变时如何防止子组件重新加载
【发布时间】：2018-12-01 10:02:22
【问题描述】：

有一种场景是父组件发送imgkeyprops给子组件。当子组件加载该图像时，它可以更改img并通过回调更改其状态返回父组件。

现在父组件具有其他功能，当其他功能使状态发生变化时，每次都会加载子组件（图像）。如何防止在相同的 imgkey 道具上重新加载？

总体而言，当父级发送与之前发送相同的道具 imgkey 时，子级不应重新加载

【问题讨论】：

你想要shouldComponentUpdate
@Hamms 但这将适用于整个父组件而不是子组件
具体来说，为孩子定义shouldComponentUpdate
我可能在这里遗漏了一些东西，但可以通过让您的子组件扩展自 PureComponent 而不是 Component（更多关于 PureComponent here）来解决这个问题。只要您避免直接更改状态和道具中的对象（无论如何都应该这样做），PureComponent 通常会防止不必要的重新渲染而不会产生任何负面影响。
刚刚重新阅读问题并意识到父组件可能也需要是PureComponent，或者如果这不起作用，那么您需要手动实现shouldComponentUpdate其他人提出了建议。

标签： javascript reactjs

【解决方案1】：

我相信这取决于您的子组件，如果孩子需要：

保持渲染或跟进一些逻辑；或
可有可无，我们可以跳过渲染它

孩子

此组件将继续渲染，有时仅在需要时运行一些逻辑。

class Child extends Component {
  static getDerivedStateFromProps(props, state) {
    if (props.id % 10 === 0) {
      return { shouldRunLogic: true };
    }
    return { shouldRunLogic: false };
  }
  constructor(props, context) {
    super(props, context);
    this.state = { shouldRunLogic: false };
  }
  componentDidMount() {
    // Let's do our stuff once DOM mounted
    this.handleSomeLogic();
  }
  componentDidUpdate(prevProps, prevState) {
    // Do we need to call our logic again?
    if (this.state.shouldRunLogic) {
      this.handleSomeLogic();
    }
  }
  handleSomeLogic() {
    // do some stuff
    this.props.onFinish('Child finished the logic');
  }
  render() {
    // Makes sure we always render for children if any
    return <div>{this.props.id}-{this.props.children}</div>;
  }
}

DispensableChild

这个组件只做一件事，在逻辑完成后从不重新渲染。

class DispensableChild extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = { isComplete: false };
  }
  componentDidMount() {
    // Let's do our stuff once DOM mounted
    this.handleSomeLogic();
  }
  shouldComponentUpdate(nextProps, nextState) {
    return !this.state.isComplete;
  }
  handleSomeLogic() {
    // do some stuff
    // ...
    // Let's make sure this component never render again
    this.setState({ isComplete: true }, () => this.props.onFinish('DispensableChild finished the logic'));
  }
  render() {
    return this.state.isComplete || <div>Doing some logic</div>;
  }
}

家长

包括两个子组件，但只有 Child 会继续渲染。

class Parent extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = { childId: 1 };
    this.handleFinish = this.handleFinish.bind(this);
  }
  componentDidMount() {
    // Let's pass the prop every 15 secs
    setInterval(() =>
      this.setState(({ childId }) => ({ childId: childId + 1})), 15000);
  }
  handleFinish(message) {
    console.log(message);
  }
  render() {
    return (
      <div>
        <Child id={this.state.childId} onFinish={this.handleFinish} />
        <DispensableChild id={this.state.childId} onFinish={this.handleFinish} />
      </div>
    );
  }
}

【讨论】：