Question

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

在像Redux中的connect()这样的传统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可以为React组件提供context，这些组件在嵌套组件中累积 - 顺序无关紧要，对吗？
组件定义永远不会被卸载，ComponentWithLazyHOC每个组件只创建一次（不是组件实例）。你能看到任何内存泄漏的可能性吗？

React：高阶组件的懒惰评估？

0 个答案: