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

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

那是准确的吗？

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

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

作为一个很好的做法 - Example1。

至于性能，应该是Example1。Example2运行useState并将值a与每次渲染时的前一个状态进行比较，这比声明一个变量“昂贵得多”。

一个更好的例子是比较组件引用/记忆变量与变量（Example1）：

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

但答案几乎是一样的。

看到这样的代码表明 refa 可能会改变。的使用useMemo表明这b是一个“繁重的计算”变量，如果不是，它只是一个开销（与上面的解释相同），最好使用Example 1。

Answer 2

将这个答案的重点放在何时使用什么上。

基本概念，

现在在你的第二个例子中

const [a] = useState(1)

这行代码是完全错误的。那是因为您添加了一个观察者但不接受 setter 回调。

示例1 在每个渲染上创建一个变量

是的，这是正确的。在示例 2 中，它创建了 1 个变量，但是 React 中的状态是不可变的。这意味着，每次渲染时，整个对象都会被复制到临时变量中，销毁并再次创建。因此，建议不要在状态中存储巨大的对象，因为这会对您的性能产生不利影响。