时间戳

首页 > 解决方案 > 有没有办法在同一个反应元素内的钩子调用之间进行交互

javascript - 有没有办法在同一个反应元素内的钩子调用之间进行交互

问题描述

问题

有没有办法在同一个渲染调用中的钩子调用之间进行交互？让钩子在每次调用时都可以访问相同的值。例如，是否可以实现useRandom()钩子，它会生成随机值，然后在每次调用时返回相同的值，即使在相同的渲染周期内也是如此。

可能但不理想的解决方案

我唯一的解决方案是用一些上下文包装组件，并在每个钩子调用上使用这个上下文进行交互。但是 at 迫使我为每个组件创建两个额外的节点（要使用的上下文和内部的另一个上下文，以防止嵌套组件使用相同的上下文）。我可以为此创建 HoC/renderProp，但这两个额外的上下文仍然存在。

例子

上下文和钩子

const InteractContext = React.createContext();

const useRandom = () => {
  const context = useContext(InteractContext);

  if (!context.value) {
    context.value = Math.random();
  }

  return context.value;
}

使用钩子的组件

const MyComponent = () => {
  const random1 = useRandom();
  const random2 = useRandom();

  return (
    // to prevent using this value by nested components
    <InteractContext value={ null }>
      {random1} === {random2}
    </InteractContext>
  );
}

渲染组件

render(
  <>
    <InteractContext value={{}}>
      <MyComponent />
    </InteractContext>,
    <InteractContext value={{}}>
      <MyComponent />
    </InteractContext>
  </>,
  document.getElementById('root')
);

预期结果

我希望看到这种格式：

<some random number> === <the same number>
<another random number> === <the same random number>

这是一个例子：

0.123456789 === 0.123456789
0.987654321 === 0.987654321

标签： javascriptreactjsreact-hooks

解决方案

可能关闭？

 const useRandomness = () => (r => () => r)(Math.random());

 // inside the component:
  const useRandom = useRandomness();
  useRandom() === useRandom();

或将该共享值传递给：

  const useRandom = v => v;

  // inside the component:
 const random = Math.random();

 useRandom(random) === useRandom(random)

推荐阅读