嗨,出于好奇,可以按以下方式使用useMemo
代替useRef
进行以下操作:
例:
const ref = useRef(null);
const ref2 = useMemo(() => { current: null }, []);
在我看来,这两个ref都可以像DOM ref一样工作,并且可以作为可变值,类似于类中的实例字段。 为什么考虑到useRef
和useMemo
ReactFiberHooks.js代码,与useMemo
相比,实现useRef
方式有所不同?
谢谢!
您可以通过这种方式创建ref对象,但是效率会降低,因为useMemo
还会跟踪和比较依赖项。 (即使您指定了一个空的依赖关系数组,备注挂钩的基础数据结构也会有多余的空间。)
为了说明这一点,您可以比较useRef
:
https://github.com/facebook/react/blob/434770c3b4b94315c789234c27ed9dc2ec8a78ad/packages/react-reconciler/src/ReactFiberHooks.js#L907 -L920
到useMemo
:
https://github.com/facebook/react/blob/434770c3b4b94315c789234c27ed9dc2ec8a78ad/packages/react-reconciler/src/ReactFiberHooks.js#L1126 -L1156
由于两个钩子都经常使用,因此重要的是它们必须发挥最佳性能:smile:因此它们的实现方式有所不同。
您可以用这种方法创建一个ref对象,但是效率会降低,因为
useMemo
还会跟踪和比较依赖项。 (即使您指定了一个空的依赖关系数组,备注挂钩的基础数据结构也会有多余的空间。)为了说明这一点,您可以比较
useRef
:
https://github.com/facebook/react/blob/434770c3b4b94315c789234c27ed9dc2ec8a78ad/packages/react-reconciler/src/ReactFiberHooks.js#L907 -L920到
useMemo
:
https://github.com/facebook/react/blob/434770c3b4b94315c789234c27ed9dc2ec8a78ad/packages/react-reconciler/src/ReactFiberHooks.js#L1126 -L1156由于两个钩子都经常使用,因此重要的是它们必须发挥最佳性能😄因此它们的实现方式有所不同。
嗨,如何格式化这样的代码?
如果您链接到特定的文件修订版和行号,则@ yaofly2012 GitHub格式
最有用的评论
您可以通过这种方式创建ref对象,但是效率会降低,因为
useMemo
还会跟踪和比较依赖项。 (即使您指定了一个空的依赖关系数组,备注挂钩的基础数据结构也会有多余的空间。)为了说明这一点,您可以比较
useRef
:https://github.com/facebook/react/blob/434770c3b4b94315c789234c27ed9dc2ec8a78ad/packages/react-reconciler/src/ReactFiberHooks.js#L907 -L920
到
useMemo
:https://github.com/facebook/react/blob/434770c3b4b94315c789234c27ed9dc2ec8a78ad/packages/react-reconciler/src/ReactFiberHooks.js#L1126 -L1156
由于两个钩子都经常使用,因此重要的是它们必须发挥最佳性能:smile:因此它们的实现方式有所不同。