1 引言
useRef
是常用的 API,但还有一个 createRef
的 API,你知道他们的区别吗?通过 React.useRef and React.createRef: The Difference 这篇文章,你可以了解到何时该使用它们。
2 概述
其实原文就阐述了这样一个事实:useRef
仅能用在 FunctionComponent,createRef
仅能用在 ClassComponent。
第一句话是显然的,因为 Hooks 不能用在 ClassComponent。
第二句话的原因是,createRef
并没有 Hooks 的效果,其值会随着 FunctionComponent 重复执行而不断被初始化:
function App() {
// 错误用法,永远也拿不到 ref
const valueRef = React.createRef();
return <div ref={valueRef} />;
}
上述 valueRef
会随着 App 函数的 Render 而重复初始化,这也是 Hooks 的独特之处,虽然用在普通函数中,但在 React 引擎中会得到超出普通函数的表现,比如初始化仅执行一次,或者引用不变。
为什么 createRef
可以在 ClassComponent 正常运行呢?这是因为 ClassComponent 分离了生命周期,使例如 compo