React: 问题:可以使用useMemo代替useRef吗?

创建于 2020-02-03  ·  3评论  ·  资料来源: facebook/react

嗨,出于好奇,可以按以下方式使用useMemo代替useRef进行以下操作:

例:

const ref = useRef(null);
const ref2 = useMemo(() => { current: null }, []);

在我看来,这两个ref都可以像DOM ref一样工作,并且可以作为可变值,类似于类中的实例字段。 为什么考虑到useRefuseMemo ReactFiberHooks.js代码,与useMemo相比,实现useRef方式有所不同?

谢谢!

Invalid Question

最有用的评论

可以通过这种方式创建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:因此它们的实现方式有所不同。

所有3条评论

可以通过这种方式创建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

由于两个钩子都经常使用,因此重要的是它们必须发挥最佳性能😄因此它们的实现方式有所不同。

嗨,如何格式化这样的代码?
image

如果您链接到特定的文件修订版和行号,则@ yaofly2012 GitHub格式

  1. 开启档案
  2. 单击行号
  3. 按住SHIFT键并单击另一个行号以选择范围
  4. 输入“ y”以固定到当前版本
  5. 复制并粘贴URL到GitHub
此页面是否有帮助?
0 / 5 - 0 等级