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

【问题标题】：How to communicate between two siblings components without changing state of parent?如何在不改变父级状态的情况下在两个兄弟组件之间进行通信？
【发布时间】：2016-09-07 15:06:07
【问题描述】：

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

【问题讨论】：

你确定更新父组件的状态是个大问题吗？如果它包含许多其他子组件，您可以考虑制作一个仅包含 List 和 Map 的中间组件，并改为更新该组件的状态。
@TomFenech，我不确定。我有一个最多可以包含 1000 个元素的列表，并且它们在每个 Parent 渲染之前进行过滤和排序，所以我认为在每个元素悬停时重新渲染并不是一个好主意

标签： javascript reactjs

【解决方案1】：

不，不会的。

它只会重新渲染已更改的元素。
去做就行了，不用担心 - O(n) 非常快。正如 cmets 中所指出的，如果您的组件非常大 - 您也可以实现一个中间组件。

这里是React implements the diff algorithm.

在以下情况下重新渲染：

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

【讨论】：

感谢您的回答。我将尝试在最大数量的元素上对其进行测试，但不仅要考虑渲染，还要考虑排序和过滤，如果我正确的话，它将O(n^2)
所以如果你的复杂度是二次方的，你根本不用担心线性计算。

【解决方案2】：

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

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

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

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

【讨论】：