第十章:useRef源码解析

前言

本章解锁useRef 源码,useRef 的源码还是很简单的,也是使用十分广泛的hook,而且使用场景还是很广泛的;
useRef 也会配合useImperativeHandleforwardRef 使用;
useRef并不会导致重新渲染,通常会做一些缓存相关的问题。

源码解析

js 复制代码
const ref = useRef(initialValue)

按照常规流程,调用HooksDispatcherOnMountInDEV.useRef 的方法,前置check检查方法,核心方法mountRef

调用mountWorkInProgressHook方法,

js 复制代码
const hook = {
    memoizedState: null,
    baseState: null,
    baseQueue: null,
    queue: null,
    next: null
};
fiber.memoizedState = hook;

mountRef的核心代码也很简单

js 复制代码
const ref = {current: initialValue};
hook.memoizedState = ref;

返回ref对象,源码还是很简单,因为ref是一个对象,默认是使用current对象,可以把useRef当成一个可以缓存的对象;

直接修改ref对象值,并不会导致组件重新渲染,需要通过其他的方法触发渲染。

update阶段

调用HooksDispatcherOnUpdateInDEV.useEffect 方法,调用check方法,核心方法updateRef

调用updateWorkInProgressHook 方法,将mount阶段创建的hook,copy一份,返回fiber.memoizedState ;

因为copy的时候会把上一次的值保存下来,并且是对象引用,所以每次都是最新值。

总结

useRef就是简单创建hook对象,创建一个ref对象。

补充

在使方法通常是

js 复制代码
const ref = useRef(null);
ref.current = value;

可以直接通过改变值的方式修改;

js 复制代码
const ref = useRef(null);
<div ref={ref}></div>

第二种方式涉及到react dom解析,理解成ref.current = div ;

第一种方式常常使用方式,因为ref是一个对象,也可以按照对象方式使用,

js 复制代码
const ref = useRef(null);
ref.key = 'value';
console.log(ref.key)

不常用,不推荐,但是可以使用。

相关推荐
brzhang3 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止4 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms4 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登4 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in4 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4166 小时前
HTML面试题
前端·html
张可6 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课6 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
谢尔登7 小时前
【React Native】ScrollView 和 FlatList 组件
javascript·react native·react.js
蓝婷儿7 小时前
每天一个前端小知识 Day 27 - WebGL / WebGPU 数据可视化引擎设计与实践
前端·信息可视化·webgl