小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
翻译自:beta.reactjs.org/learn/refer…
当你希望组件“记住”一些信息,但是你不希望这些信息触发重新 render 的时候,你可以使用 ref,它像一个秘密的“口袋”,用于在组件中存储信息。
系列文章
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