在 React Hooks 中处理常量的最佳实践

Question

使用 React Hooks，存储需要大量计算才能初始化但不会在重新渲染时发生变化的常量的最佳做法是什么？

选项 1：钩子定义之外的常量

const x = heavyCalculation();
export default function MyHook() {
  return <div>x</div>
}

选项 2：使用备忘录

export default function MyHook() {
  const x = useMemo(() => heavyCalculation(), [])
  return <div>x</div>
}

选项 3：useRef

export default function MyHook() {
  const x = useRef(heavyCalculation())
  return <div>x</div>
}

我喜欢选项 1，但我不知道它是否被认为是最适合风格的钩子。

Answer 1

选项 1 有效，但它不是特别灵活 - 如果多个实例在给定时间呈现，并且它们并不都共享相同的 heavyCalculation 结果怎么办？但是，如果您可以指望该值只需在所有组件中精确计算一次，那就去吧。

选项 2 是正确的选择，但请注意，您可以将其简化为：

export default function MyHook() {
  const x = useMemo(heavyCalculation, [])
  return <div>{x}</div>
}

（另请注意，您确实需要{x}，而不仅仅是x，才能显示x 结果）

选项 3 将不起作用，因为每次渲染都会调用 heavyCalculation。 （您还必须引用x.current，而不仅仅是x）