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

Question

使用React Hooks，存储需要大量计算才能初始化但随后在重新渲染时不变的常量的最佳实践是什么？

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

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

选项2：useMemo

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）