141. 精读《useRef 与 createRef 的区别》

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