Question

在下面的示例中，我看到Child已卸载并重新安装在每个ComponentA渲染上。树中的其他任何组件都没有重新安装。

class ComponentA extends Component {
  renderChild() {
    return <Child />;
  }
  render() {
    return <ComponentB>{this.renderChild()}</ComponentB>;
  }
}

class ComponentB extends Component {
  render() {
    return <ComponentC passthruChild={() => children} />;
  }
}

class ComponentC extends Component {
  render() {
    const PassedThruChild = this.props.passthruChild;
    return <div><PassedThruChild /></div>;
  }
}

为什么会发生这种情况，我怎么能让它不发生？

Answer 1

这完全是推测性的，但我认为它可能是这样的：当ComponentA呈现时，this.renderChild（）返回一个新的Child实例。此实例与某些缓存实例不同，后者导致缓存的子实例被新实例替换。缓存的一个正在卸载，而新的一个正在安装。

在另外两种情况下，pass through through child可以是跨多个渲染的同一对象的引用。

我认为您应该能够使用开发工具检查它们是否是同一个对象或不同的对象。

由于我没有50分，所以我无法回复你的评论，所以我会在这里回答：

如果你保存的是从this.renderChild（）缓存返回的对象，这样你每次调用函数时都不会创建一个新对象，你可能会使它工作。

当道具被重新安装时，孩子通过

1 个答案: