概述
在Function Component项目中当我们需要操作dom的时候,第一时间想到的就是使用useRef这个Hook来绑定dom。但是这个仅仅是使用这个Hook而已,为了更好的学习React Hooks内部实现原理,知其所以然。所以本文根据源码从useRef的基础使用场景一步一步到内部实现来对其进行介绍。
基本使用
在React中useRef是这样定义的:useRef保存一个可变的持久化引用,重新渲染时不会重值,更新值也不会渲染页面
。
javascript
export function useRef<T>(initialValue: T): { current: T } {
const dispatcher = resolveDispatcher();
return dispatcher.useRef(initialValue);
}
由代码能看出useRef接收任意类型的值,包含普通值、函数、dom,然后经过dispather进行派发处理,返回一个包含current属性的对象引用,该对象和普通Js对象一致,更新不收React约束。
一般在项目中useRef常用的有两个使用场景:
- 通过useRef保持持久化的值,且不需要重新渲染
- 通过useRef绑定dom,以便直接进行dom操作
比如在项目中常用的定时器,我们都会在组件销毁时通过clear函数
进行定时器的清除避免内存泄露等问题,这时候就可以通过useRef来绑定timerId
javascript
import { useRef } from 'react';
let timerId = useRef(null);
useEffect(() => {
timerId.current = setInterval(() => {
console.log('setInterval');
}, 1000);
return () => {
clearInterval(timerId.current);
}
}, [])
export default function Counter() {
return <></>
}
当我们需要进行dom操作时,比如获取焦点、自动滚动等,就可以通过useRef来绑定dom进行操作
javascript
import { useRef } from 'react';
let inputRef = useRef(null);
useEffect(() => {
// 在组件挂载后聚焦输入框
inputRef.current.focus();
}, [])
export default function Counter() {
return <input ref={inputRef} type='text' />
}
源码解析
由于这里的mount、update逻辑很简单,并当useRef传递值/函数和传递dom时的处理是不一样的,所以我们以此来分开介绍。
传递普通值时
当传递普通值时(包含任意类型值、函数),主要执行mountRef、updateRef
两个函数。在mount挂载时创建一个包含current属性的对象,然后在更新时返回相同的引用memoizedState保存的
,所以这里就在一起写了。
javascript
function mountRef<T>(initialValue: T): { current: T } {
// 创建hook链表
const hook = mountWorkInProgressHook();
// ref初始化
const ref = { current: initialValue };
hook.memoizedState = ref;
// 返回ref
return ref;
}
function updateRef<T>(initialValue: T): { current: T } {
// 复用hook
const hook = updateWorkInProgressHook();
// 返回相同引用
return hook.memoizedState;
}
从源码能看出,useRef接收一个初始化参数,可以为值/返回值的函数,然后在mountRef中创建了一个包含current的对象,在updateRef中仍然返回的该对象引用。
如果初始值是函数,因为React内部不会做判断,直接将初始值赋予current,如何是函数,则需要手动显式调用
由于不管在mount挂载时,还是在update更新时都是返回的对象引用,以此来保持持久化,当我们通过ref.current修改值时本质修改的是同一个引用对象,所以也不会触发重新渲染(object.is对比一直都是true)。
传递DOM时
当传递DOM时,在mount、update阶段也和传值一样,不会做任何处理会返回相应的对象引用,但是如果传递的是DOM时,在Reconciler协调器中通过React.createElement将JSX转换为React元素后进行fiber构造
,在构造完成生产fiber树之后会进入到commit阶段,在该阶段会遍历节点对副作用和ref进行处理,其中在layout阶段会判断当前节点类型(tag)如何是dom(tag === HostComponent
)时,如果该dom有ref,则会对ref进行处理commitAttachRef函数
在commit阶段,即renderer阶段,针对dom的不同状态和处理分为了三个阶段: Before Mutation、Mutation、Layout。有兴趣的可以查看这篇文章【React源码 - Fiber架构之Renderer】
以下commitAttachRef代码(省略了部分代码):
javascript
function commitAttachRef(finishedWork: Fiber) {
// 获取节点的ref属性
const ref = finishedWork.ref;
if (ref !== null) {
// 获取dom实例,fiber.stateNode就是绑定的dom,在completeWork中会创建dom然后绑定到fiber.stateNode上
const instance = finishedWork.stateNode;
let instanceToUse;
switch (finishedWork.tag) {
case HostHoistable:
case HostSingleton:
case HostComponent:
// 获取dom实例
instanceToUse = getPublicInstance(instance);
break;
default:
instanceToUse = instance;
}
//
if (typeof ref === "function") {
// 将dom实例回传给传递的ref函数
finishedWork.refCleanup = ref(instanceToUse);
} else {
// 普通对象赋值到current
ref.current = instanceToUse;
}
}
}
从代码能看出该函数主要就是获取ref绑定的dom实例,然后根据传入ref的不同进行处理,如果是函数则将dom实例传递给函数由开发者显式调用,否则则绑定到current属性上进行返回。
传递函数,显式处理ref的demo:
javascript
import React, { useEffect, useRef } from 'react';
function App() {
const divRef = useRef(null);
useEffect(() => {
if (divRef.current) {
console.log('Element mounted:', divRef.current);
}
return () => {
console.log('Element unmounted:', divRef.current);
};
}, []);
return <div ref={divRef}>Hello, World!</div>;
}
export default App;
总结
基于以上了解,我们知道了useRef的基础使用和场景以及背后的代码处理,简要总结一下就是:useRef用于持久化引用,返回普通Js引用,修改其值不会导致组件重新渲染。当传递普通值时,不会进行特殊处理,只是返回相同的对象引用。当绑定dom时,在mount、update阶段初始化对象,然后在commit阶段进行ref处理,函数显式处理则会将dom实例作为参数回传,普通值则会绑定到ref.current中
。