时间戳

首页 > 解决方案 > 在 React Hooks 中处理常量的最佳实践

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

问题描述

使用 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，但我不知道它是否被认为是风格上最好的钩子。

标签： reactjsreact-hooks

解决方案

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

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

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

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

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

推荐阅读