Javascript 当父组件状态更改时，如何防止子组件重新加载

存在这样一种情况：父组件将

imgkey

props

发送给子组件。当子组件加载该图像时，它可以更改

img

，并通过回调更改其状态返回到父组件

现在父组件具有其他功能，当其他功能改变状态时，每次都会加载子组件（图像）。如何防止在相同的

imgkey

道具上重新加载

---

总的来说，如果家长发送的道具与之前发送的道具相同，那么孩子不应该重新加载

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

• 保持渲染或跟踪某些逻辑；或
• 它是可有可无的，我们可以跳过渲染它

小孩 此组件将保持渲染，有时仅在需要时运行一些逻辑

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>;
  }
}

类子级扩展组件{
静态getDerivedStateFromProps（props，状态）{
如果（props.id%10==0）{
返回{shouldlrunlogic:true}；
}
返回{shouldlrunlogic:false}；
}
构造函数（道具、上下文）{
超级（道具、背景）；
this.state={shouldlrunlogic:false}；
}
componentDidMount（）{
//等我们完成任务后再做
这个。handleSomeLogic（）；
}
componentDidUpdate（prevProps、prevState）{
//我们需要再次调用我们的逻辑吗？
if（this.state.shouldRunLogic）{
这个。handleSomeLogic（）；
}
}
handleSomeLogic（）{
//做点什么
this.props.onFinish（'Child finished the logic'）；
}
render（）{
//确保我们始终为儿童渲染（如果有）
返回{this.props.id}-{this.props.children}；
}
}

---

可有可无的孩子 该组件只做一件事，并且在逻辑完成后不会重新渲染

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>;
  }
}

类DisposableChild扩展组件{
构造函数（道具、上下文）{
超级（道具、背景）；
this.state={isComplete:false}；
}
componentDidMount（）{
//等我们完成任务后再做
这个。handleSomeLogic（）；
}
shouldComponentUpdate（下一步，下一步状态）{
return！this.state.isComplete；
}
handleSomeLogic（）{
//做点什么
// ...
//让我们确保该组件不再渲染
this.setState（{isComplete:true}，（）=>this.props.onFinish（'disposablechild完成了逻辑'）；
}
render（）{
返回this.state.isComplete | |执行一些逻辑；
}
}

---

父母亲 包括两个子组件，但只有子组件将继续渲染

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>
    );
  }
}

类父级扩展组件{
构造函数（道具、上下文）{
超级（道具、背景）；
this.state={childId:1}；
this.handleFinish=this.handleFinish.bind（this）；
}
componentDidMount（）{
//让我们每15秒传递一次道具
设置间隔（（）=>
this.setState（（{childId}）=>（{childId:childId+1}）），15000）；
}
handleFinish（信息）{
控制台日志（消息）；
}
render（）{
返回(
);
}
}

您需要@Hamms，但这将适用于整个父组件，而不是儿童具体而言，为儿童定义

shouldComponentUpdate

，我可能在这里遗漏了一些内容，但可以通过使您的子组件从

PureComponent

扩展而不是

组件来解决此问题（更多关于PureComponent的内容）。只要您避免状态和道具中对象的直接突变（无论如何都应该这样做），
PureComponent
通常可以防止不必要的重新渲染，而不会产生任何负面的副作用。只需重新阅读问题并意识到父组件可能也需要是
PureComponent
，或者如果这不起作用，则需要按照其他人的建议手动实现
shouldcomponnentUpdate
D