javascript - 将 const 值存储在变量和状态之间有区别吗？

Question

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

标准变量:

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

存储状态:

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

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

Answer 1

Is that accurate?

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

And is one of these methods preferable in terms of performance/good practice?

作为一个好的做法 - Example1。

至于性能，应该是Example1。示例 2 运行 useState并比较值 a每次渲染的先前状态都比声明变量“昂贵得多”。

一个更好的例子是比较 组件引用 / 内存 变量与变量(示例 1):

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

但答案几乎是一样的。

看到这样的代码表明引用 a 可能会改变 .使用 useMemo表示 b是 “重计算”变量 ，如果没有，这只是一个开销(与上面的解释相同)并更好地使用示例 1。