0

我想创建一个生成一些数据并将其保存在某个变量中的助手，并且在下次执行时，它应该使用记忆值进行计算。

基本上它是高阶包装器的帮手。这意味着应该为每个 HOC 创建存储，但不应该在下一次重新渲染时重新创建。

现在它看起来像：
伪代码

var storage; // I want to create this storage for every HOC only once.

function createDynamicStyles(theme, stylesCreator, status) {
// create a styles registry only once. This function can be re-called by the same HOC
// on each re-render so I want to use the memoized registry.
  if (!storage) { 
    storage = stylesCreator(theme);
   };

   return storage[status];
}

const styleCreator = theme => ({
  disabled: { color: theme.disabled },
  success: { color: theme.success }
})

const Component_1 = componentHOC((props) => {
  const { theme, status } = props;
  // I'd like to keep this helper call as simple as possible. It already has 3 arguments.
  const finalStyle = createDynamicStyles(theme, stylesCreator, status);

})(AwesomeComponent)

// these props can be changed during runtime
<Component_1 disabled={false} success={true} />

这个助手的功能流程可以分为两个步骤。
1) 第一次 HOC 调用。它根据主题创建样式并将它们保存在存储中
2) HOC 的 Next Re-render。它应该获取先前创建的样式并返回记忆值。这个值对于每个 HOC 应该是唯一的。

问题是相同的帮助器也可以用于其他组件，这意味着我们不能使用相同的存储，因为它将被覆盖，而是“最新”的 HOC。

如何解决它的可能方法：
1）创建一个包含存储本身的类，并为每个 HOC 创建一个新实例。老实说，我想避免它，因为在这种情况下它看起来对我来说太复杂了。

2）创建一些共享注册表并为每个 HOC 传递 UUID。这很好，但我不知道如何自动做到这一点。我不想在每个 HOC 上手动传递 UUID。我想在后台拥有这个功能，以保持 HOC 调用的轻量级。

我在考虑new Map, 并将创建的样式保存为键值对，但它根本不起作用，因为我们在 HOC 中没有生成的 KEY 引用。所以我们不能用它作为钥匙。

仅在普通功能的情况下是否可以这样做？也许我错过了其他一些有趣的变体。

感谢您的任何帮助和建议。亲切的问候。

4

0 回答 0