将 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

那准确吗？是的，正如您所说，Example1在每个渲染上创建一个变量（在范围的末尾将其标记为“一次性” - 与 React 无关，但与 Javascript 无关），Example2创建一次变量并维护它直到组件被卸载（或此变量的状态通过setState) 更改。就性能/良好实践而言，这些方法之一是否更可取？作为一个好的做法 - Example1。至于性能，应该是Example1。Example2运行useState并将值a与每个渲染上的先前状态进行比较，这比声明变量“昂贵得多”。一个更好的例子是比较组件引用/记忆变量与变量（示例1）：function Example2() {&nbsp; const a = useRef(1);&nbsp; const b = useMemo(() => 1, []);&nbsp; return <div>{a.current} , {b}</div>}但答案几乎是一样的。看到这样的代码表明 refa 可能会改变。的使用useMemo表示这b是一个“繁重的计算”变量，如果不是，它只是一个开销（与上面的解释相同）并且更好地使用示例 1。

Answer 2

将此答案的重点放在何时使用什么上。基本概念，如果您需要观察一个值并对其做出反应，将其存储在状态中是有意义的。如果您只想存储一个值以用于显示/计算目的，则使用 aconst/let更合适。现在在你的第二个例子中const&nbsp;[a]&nbsp;=&nbsp;useState(1)这行代码是错误的。那是因为您正在添加观察者但不接受 setter 回调。Example1 在每次渲染上创建一个变量是的，这是正确的。在 Example2 中，它创建了 1 个变量，但是，React 中的状态是不可变的。这意味着，每次渲染，整个对象都会被复制到一个临时变量，销毁并再次创建。由于这个事实，建议不要将大型对象存储在状态中，因为它会对您的性能产生不利影响。

Answer 3

您的假设几乎是正确useState的，变量创建一次并在每次渲染时重复使用。但是，主要区别在于修改使用 useState 创建的变量（通过其 setter 方法）会触发组件刷新。如果你只需要在渲染之间保存一个值，你应该使用其他钩子，例如 useRef、useCallback 或 useMemo