Question

我已经注意到在React功能组件中实现看似相同的两种方法。当您具有本质上仅在该组件内部需要的配置值时（只是一个恒定值，从不传入或修改），您可以只使用常规的const或将其存储在组件的状态中。 / p>

标准变量：

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

存储状态：

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

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

Answer 1

这样准确吗？

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

从性能/良好实践的角度来看，这些方法之一是否更可取？

作为一种好的做法- Example1 。

关于性能，应为 Example1 。 Example2 运行useState，并将值a与每个渲染器上的先前状态进行比较，这比声明变量“要昂贵得多”。

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

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

但是答案几乎相同。

看到这样的代码，表示参考文献a 可能会更改。使用useMemo表示b是“大量计算”变量，如果不是，则只是开销（与上面的解释相同），最好使用 1 。

Answer 2

此答案的重点在于何时使用什么。

基本概念

如果您需要观察一个值并对其作出反应，则将其存储在状态中是很有意义的。
如果您只想存储用于显示/计算目的的值，则使用const/let更合适。

现在在第二个示例中

const [a] = useState(1)

这行代码直接是错误的。那是因为您要添加观察者，但不接受setter回调。

Example1在每个渲染器上创建一个变量

是的，这是正确的。在Example2中，它创建1个变量，但是React中的状态是不可变的。这意味着，每次渲染时，整个对象都会复制到一个temp变量中，然后销毁并重新创建。因此，建议不要在状态下存储大对象，因为这会对您的性能产生不利影响。

Answer 3

您的假设几乎是正确的，使用useState变量将创建一次，并在每个渲染器上重复使用。

但是，主要区别在于，修改用useState创建的变量（通过其setter方法）会触发组件刷新。

如果您只需要在渲染之间保存一个值，则应使用其他钩子，例如useRef，useCallback或useMemo

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

3 个答案: