时间戳

首页 > 解决方案 > 不要在 react 中重新渲染 HOC 组件

reactjs - 不要在 react 中重新渲染 HOC 组件

问题描述

我有一个反应应用程序，有不同的路线。

有些路线需要菜单类型 A，而其他路线需要菜单类型 B。

我创建了 2 个创建 2 个不同菜单的 HOC 组件，并且我的每条路线都将调用一个使用 HOC 的组件。

举个例子 ：

<PrivateRoute path="/ws/:ws/pj/:pj/rp/:rp" component={HomeReport} />
<PrivateRoute path="/ws/:ws/pj/:pj/ds/:ds" component={HomeDatastore} />

HomeReport 看起来像这样

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(withTranslation()(withMenuA(HomeReport)));

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(withTranslation()(withMenuA(HomeDatastore)));

现在，这看起来不错，问题是，当我更改使用相同菜单的组件时（HomeReport => HomeDatastore）

所有左侧菜单都完全重绘，因为它位于一个新组件中。

我想知道是否有办法防止我的 HOC 组件在每次组件更改时重新绘制。

标签： reactjs

解决方案

查看您的设计，您的菜单位于抽屉中，而抽屉是可以安全地提升到应用顶部的组件（因为它们不是内联的另一个组件）。

如果您提升抽屉，它将不再根据您所在的路线重新渲染，因为它们不再是该组件树的一部分。

由于您已经将 Redux 用于全局状态，我建议：

  • 创建一个存在于应用顶层的抽屉组件
  • 通过反应上下文（或通过redux，两者都可以）向下传递方法以操纵抽屉状态（例如打开关闭等）

这是一个演示这个想法的 CodeSandbox。这个使用反应上下文和反应钩子和 HOC 的例子。

注意：您还可以进一步将该抽屉组件包装在您想要的任何 HOC 中（例如 redux）。

推荐阅读