如何在不改变父级状态的情况下在两个兄弟组件之间进行通信？

Question

我是ReactJS的新手，我遇到了以下问题 - 我有Parent组件和两个子组件 - List和Map。这两个都有儿童用品。我想要的是当我将组件悬停在Map中时 - 更改List中相应组件的样式，反之亦然。 我可以处理悬停事件，但是如果我在Parent状态中保存悬停元素的ID，它将在每个悬停时重新呈现完整的Parent组件。我怎么能避免这个？ 我没有使用Redux或类似的东西。

Answer 1

不，它不会。

它只会重新渲染已经改变的元素 只要这样做，不要担心 - O(n) 非常快。 正如评论中所指出的，如果你的组件非常大 - 你也可以实现一个中间组件。

以下是React implements the diff algorithm.

的方式

以下情况下退回：

• 不同的节点类型
• 关键属性已更改

Answer 2

实现兄弟组件之间通信的方式是通过共同父母的状态。

如果更新了父级的状态，则它将重新呈现。如果这是昂贵的操作，那么一种解决方案是将状态存储在中间组件中：

<Parent>
  <Intermediate>
    <Map />
    <List />
  </Intermediate>
</Parent>

现在可以在Parent组件中完成繁重的工作，结果可以作为道具传递给Intermediate。当Intermediate的状态更新时，Parent不需要做任何工作。