Reactjs 在react中同步多个不相关的组件

在我的react应用程序中，我有一些组件，当悬停时，这些组件不仅需要突出显示被悬停的元素，还需要突出显示其他完全不相关的组件

---

一种方法是在最顶层的容器上强制更新，但一旦元素数量开始大量增加，这种方法的性能就会非常差，因此我的问题是：是否有一种方法可以以某种方式“链接”多个组件，以便每当一个组件更新时，它就会通知其相关组件？想到的另一种可能性是存储对组件对象的引用并访问

\u self

字段。但这看起来不太习惯，所以我想知道是否还有其他方法？

因为您希望将多个组件悬停在一个组件的悬停上，所以您可能会保持一种状态，即将这些组件的公共父组件中的任何组件设置为悬停。使用此状态，您可以在这些组件上添加一个类

state= {
   hovered: false
}

onHover = () => {
    this.setState({hovered: true});
}

onHoverOut = () => {
    this.setState({hovered: false});
}

现在在子组件中，您可以使用onMouseEnter

onMouseEnter = () => {
   this.props.onHover();
}

onMouseLeave = () => {
   this.props.onHoverOut();
}

您可以使用悬停的值，如

<div className={classnames({[hovered]: this.props.hovered})} />

它们需要通过公共父级以某种方式关联起来。这个问题缺少能描述你的情况的例子。您如何知道应该突出显示哪个组件？但是更改父组件的状态不会强制重新呈现整个应用程序吗？这是我已经在做的，只是我没有调用setState而是调用forceUpdate。只使用setState有什么好处吗？我实现了这个的一个基本版本，但我的应用程序仍然非常慢。我意识到，通过setState方法，我可以实现“shouldComponentUpdate”来告诉React何时更新组件。现在，只有高亮显示状态真正更改的元素才被重新呈现。您只需在React中使用PureComponent即可为您实现shouldComponentUpdate