5

我们正在尝试自定义 HOC 的参数（特别是react-graphql）。由于这个特定库 HOC 的工作方式，我们无法在调用 HOC 后影响组件状态（查询和选项）。

在像connect()Redux 这样的传统 HOC 工厂中，所有包含的逻辑都会立即应用——这对我们来说还为时过早。相反，我将原始 HOC ( applyOriginalHOC()) 的应用推迟到从该组件构造第一个实例之前。

export function applyLazyHOC(args) {
  return function wrap(WrappedComponent) {
    let ComponentWithLazyHOC; // Closed-over value is scoped to component
    class LazyHOC extends Component {
      constructor() {
        super();
        // Lazy initialising of HOC to give customisations an opportunity to be registered
        if (!ComponentWithLazyHOC) {
          ComponentWithLazyHOC = applyOriginalHOC(
            // Adds customisations which have been registered by third party code
            myCustomization(args)
          )(WrappedComponent);
        }
      }
      render() {
        return <ComponentWithLazyHOC {...this.props} />;
      }
    }

    return LazyHOC;
  };
}

这似乎是一种非常规的方法，所以我正在寻找反馈：

  • 你能看到改变 HOC 初始化顺序的副作用吗？我假设 HOC 不应该依赖其他 HOC 的存在。
  • 无论如何，HOC 都无法进行静态分析（例如在 IDE 中），因此惰性评估不会使这变得更好或更糟，对吧？
  • HOC 可以提供context给 React 组件，这些组件在嵌套组件中累积——顺序不重要，对吧？
  • 组件定义永远不会被卸载，并且ComponentWithLazyHOC每个组件（不是组件实例）只创建一次。你能看到任何潜在的内存泄漏吗？
4

0 回答 0