useRef 简单易懂解析(四)useRef 的原理

2,981 阅读1分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

翻译自:beta.reactjs.org/learn/refer…

当你希望组件“记住”一些信息,但是你不希望这些信息触发重新 render 的时候,你可以使用 ref,它像一个秘密的“口袋”,用于在组件中存储信息。

系列文章

useRef 简单易懂解析(一)useRef 的使用

useRef 简单易懂解析(二)useRef 的例子

useRef 简单易懂解析(三)ref 和 state 的对比

useRef 在内部是如何工作的呢?

尽管 useState 和 useRef 都是 React 提供的,但原则上 useRef 可以在 useState 之上实现。你可以想象在 React 内部, useRef 是这样实现的:

// React 内部
function useRef(initialValue) {
  const [ref, unused] = useState({ current: initialValue });
  return ref;
}

第一次渲染时,useRef 返回了 { current: initialValue }。这个对象会被 React 存起来,所以在下一次渲染时,将返回同样的对象,注意这里 state 的设置函数 unused 在这个例子中,是没有使用到的。它是不需要的,因为 useRef 总是只需要返回同一个对象!

React 提供了一个内置版本的 “useRef”,因为它在实践中很常见。但你可以把它想成没有状态设置函数的一个普通状态变量。如果你熟悉面向对象编程,refs 可能会让你想起实例字段,但是这里的写法是 somethingRef.current,而不是 this.something