我已经注意到在React功能组件中实现看似相同的两种方法。当您具有本质上仅在该组件内部需要的配置值时(只是一个恒定值,从不传入或修改),您可以只使用常规的const
或将其存储在组件的状态中。 / p>
标准变量:
function Example1() {
const a = 1
return <div>{ a }</div>
}
存储状态:
function Example2() {
const [a] = useState(1)
return <div>{ a }</div>
}
我得到的印象是,在幕后,这将导致Example1在每个渲染上创建一个变量,然后对其进行处理,而Example2将创建一次变量并对其进行维护,直到卸载组件。准确吗?从性能/良好实践的角度来看,这些方法之一是否更可取?
答案 0 :(得分:4)
这样准确吗?
是的,正如您所说的, 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 。
答案 1 :(得分:2)
此答案的重点在于何时使用什么。
基本概念
const/let
更合适。现在在第二个示例中
const [a] = useState(1)
这行代码直接是错误的。那是因为您要添加观察者,但不接受setter回调。
Example1在每个渲染器上创建一个变量
是的,这是正确的。在Example2中,它创建1个变量,但是React中的状态是不可变的。这意味着,每次渲染时,整个对象都会复制到一个temp变量中,然后销毁并重新创建。因此,建议不要在状态下存储大对象,因为这会对您的性能产生不利影响。
答案 2 :(得分:0)
您的假设几乎是正确的,使用useState
变量将创建一次,并在每个渲染器上重复使用。
但是,主要区别在于,修改用useState创建的变量(通过其setter方法)会触发组件刷新。
如果您只需要在渲染之间保存一个值,则应使用其他钩子,例如useRef,useCallback或useMemo