在变量中存储 const 值与在状态中存储 const 值有区别吗？

我注意到有几种方法可以在 React 功能组件中实现看似相同的事情。当您拥有本质上仅在该组件内部需要的配置值（只是一个常量值，从未传入或修改）时，您可以只使用常规const或者您可以将其存储在组件的状态中。

标准变量：

function Example1() {
  const a = 1
  return <div>{ a }</div>
}

存储状态：

function Example2() {
  const [a] = useState(1)
  return <div>{ a }</div>
}

我的印象是，在幕后这将导致 Example1 在每次渲染上创建一个变量，然后处理它，而 Example2 将创建一次变量并维护它直到组件被卸载。准确吗？就性能/良好实践而言，这些方法之一是否更可取？

准确吗？

是的，正如你所说，Example1在每个渲染上创建一个变量（在范围末尾将其标记为“一次性” - 与 React 无关，但与 Javascript 相关），Example2创建变量一次并维护它直到组件被卸载（或者该变量的状态通过setState).

就性能/良好实践而言，这些方法之一是否更可取？

作为一个好的做法 -Example1.

至于性能，应该是Example1. Example2 runs useState并比较值a每次渲染时都使用先前的状态，这比声明变量“昂贵得多”。

一个更好的例子是比较元件参考/memoized变量与变量（Example1):

function Example2() {
  const a = useRef(1);
  const b = useMemo(() => 1, []);
  return <div>{a.current} , {b}</div>
}

但答案几乎保持不变。

看到这样的代码表明refa 可能会改变。指某东西的用途useMemo表明b is a “重计算”变量，如果没有，这只是一个开销（与上面的解释相同）并且更好地使用实施例1.