剖析 React Hooks 之 useRef：深入浅出，洞悉其运作机制

前端

2023-12-15 09:24:27

React Hooks 之 useRef 源码解读

在 React 生态系统中，Hooks 扮演着至关重要的角色，为函数式组件带来了状态管理的功能。useRef 便是一款备受欢迎的 Hook，它允许开发者存储可变值，而这些值在组件的生命周期中始终保持持久。

useRef 的工作原理

当调用 useRef 时，React 会创建一个可变的 ref 对象，其 current 属性指向传递给它的初始值。在组件的整个生命周期中，这个 ref 对象都会持续存在。

mountRef 和 updateRef

在组件挂载阶段，useRef 将执行 mountRef 函数，该函数负责初始化 ref 对象。而在组件更新阶段，useRef 将执行 updateRef 函数，负责更新 ref 对象的 current 属性。

示例代码

为了更好地理解 useRef 的工作原理，我们来看一个简单的示例：

const MyComponent = () => {
  const ref = useRef(0);

  useEffect(() => {
    // 在组件挂载时，ref.current 的值为 0
    console.log('mountRef: ', ref.current);

    return () => {
      // 在组件卸载时，ref.current 的值仍为 0
      console.log('unmountRef: ', ref.current);
    };
  }, []);

  const handleClick = () => {
    // 在组件更新时，ref.current 的值加 1
    ref.current += 1;
    console.log('updateRef: ', ref.current);
  };

  return (
    <div onClick={handleClick}>
      <h1>计数：{ref.current}</h1>
    </div>
  );
};