来来来，手摸手写一个hook

news2024/11/25 5:02:38

hello，这里是潇晨，今天就带着大家一起来手写一个迷你版的hooks，方便大家理解hook在源码中的运行机制，配有图解，保姆级的教程，只求同学一个小小的👍，🐶。

第一步：引入React和ReactDOM

因为我们要将jsx转变为virtual-dom，这一步分工作就交给babel吧，而jsx被babel进行词法解析之后会形成React.createElement()的调用，而React.createElement()执行之后的返回结果就是jsx对象或者叫virtual-dom。

又因为我们要将我们的demo渲染到dom上，所以我们引入ReactDOM。

import React from "react";
import ReactDOM from "react-dom";

第二步：我们来写一个小demo

我们定义两个状态count和age，在点击的时候触发更新，让它们的值加1。

在源码中useState是保存在一个Dispatcher对象上面的，并且在mount和update的时候取到的是不同的hooks，所以我们先暂时从Dispatcher上拿到useState，等下在来定义Dispatcher。

接下来定义一个schedule函数，每次调用的时候会重新渲染组件。

function App() {
  let [count, setCount] = Dispatcher.useState(1);
  let [age, setAge] = Dispatcher.useState(10);
  return (
    <>
      <p>Clicked {count} times</p>
      <button onClick={() => setCount(() => count + 1)}> Add count</button>
      <p>Age is {age}</p>
      <button onClick={() => setAge(() => age + 1)}> Add age</button>
    </>
  );
}

function schedule() {    //每次调用会重新渲染组件
  ReactDOM.render(<App />, document.querySelector("#root"));
}

schedule();

第三步：定义Dispatcher

在看这部分前，先来捋清楚fiber、hook、update的关系，看图：

image-20211129105128673

Dispatcher是什么：Dispatcher在源码中就是一个对象，上面存放着各种各样的hooks，在mount和update的时候会使用过不同的Dispatcher，来看看在源码中Dispatcher是什么样子：

在调用useState之后，会调用一个resolveDispatcher的函数，这个函数调用之后会返回一个dispatcher对象，这个对象上就有useState等钩子。

image-20211126164214374

那我们来看看这个函数做了啥事情，这个函数比较简单，直接从ReactCurrentDispatcher对象上拿到current，然后返回出来的这个current就是dispatcher，那这个ReactCurrentDispatcher又是个啥？别急，继续在源码中来找一下。

image-20211126164903336

在源码中有这样一段代码，如果是在正式环境中，分为两种情况

  1. 如果满足 current === null || current.memoizedState === null，说明我们处于首次渲染的时候，也就是mount的时候，其中current就是我们fiber节点，memoizedState保存了fiber上hook，也就是说在应用首次渲染的时候，current fiber是不存在的，我们还没有创造出任何fiber节点，或者存在某些fiber，但是上面没有构建相应的hook，这个时候就可以认为是处于首次渲染的时候，我们取到的是HooksDispatcherOnMount
  2. 如果不满足 current === null || current.memoizedState === null，就说明我们处于更新阶段，也就是update的时候，我们取到的是HooksDispatcherOnUpdate
if (__DEV__) {
    if (current !== null && current.memoizedState !== null) {
      ReactCurrentDispatcher.current = HooksDispatcherOnUpdateInDEV;
    } else if (hookTypesDev !== null) {
      ReactCurrentDispatcher.current = HooksDispatcherOnMountWithHookTypesInDEV;
    } else {
      ReactCurrentDispatcher.current = HooksDispatcherOnMountInDEV;
    }
  } else {
    ReactCurrentDispatcher.current =
      current === null || current.memoizedState === null
        ? HooksDispatcherOnMount
        : HooksDispatcherOnUpdate;
  }

那我们就来看一下这个HooksDispatcherOnMount和HooksDispatcherOnUpdate是个什么，好家伙，原来你包含了所有的hooks啊。

const HooksDispatcherOnMount: Dispatcher = {
  readContext,

  useCallback: mountCallback,
  useContext: readContext,
  useEffect: mountEffect,
  useImperativeHandle: mountImperativeHandle,
  useLayoutEffect: mountLayoutEffect,
  useMemo: mountMemo,
  useReducer: mountReducer,
  useRef: mountRef,
  useState: mountState,
  useDebugValue: mountDebugValue,
  useDeferredValue: mountDeferredValue,
  useTransition: mountTransition,
  useMutableSource: mountMutableSource,
  useOpaqueIdentifier: mountOpaqueIdentifier,

  unstable_isNewReconciler: enableNewReconciler,
};

const HooksDispatcherOnUpdate: Dispatcher = {
  readContext,

  useCallback: updateCallback,
  useContext: readContext,
  useEffect: updateEffect,
  useImperativeHandle: updateImperativeHandle,
  useLayoutEffect: updateLayoutEffect,
  useMemo: updateMemo,
  useReducer: updateReducer,
  useRef: updateRef,
  useState: updateState,
  useDebugValue: updateDebugValue,
  useDeferredValue: updateDeferredValue,
  useTransition: updateTransition,
  useMutableSource: updateMutableSource,
  useOpaqueIdentifier: updateOpaqueIdentifier,

  unstable_isNewReconciler: enableNewReconciler,
};

所以dispatcher就是个对象，里面包含了所有的hooks，在首次渲染和更新的时候拿到的是不同的dispatcher，在调用hooks的时候就会调用到不同的函数，比如如果使用了useState，在mount的时候调用到的就是mountState，在update的时候调用到的就是updateState。

image-20211126170906166

现在我们来手写一下dispatcher，dispatcher是个对象，对象上存在useState，我们用一个自执行函数来表示，此外还需要用到两个变量和一个常量fiber

  • workInProgressHook表示遍历到的hook（因为hook会保存在链表上，需要遍历链表计算hook上保存的状态）
  • 为了简单起见，定义一个isMount=true表示mount的时候，在update的时候将它设置成false，
  • 为简单起见，fiber就定义成一个对象，memoizedState表示这个fiber节点上存放的hook链表，stateNode就是第二步的demo。

相关参考视频讲解：进入学习

let workInProgressHook;//当前工作中的hook
let isMount = true;//是否时mount时

const fiber = {//fiber节点
  memoizedState: null,//hook链表
  stateNode: App
};

const Dispatcher = (() => {//Dispatcher对象
  function useState(){
    //。。。
  }

  return {
    useState
  };
})();

在定义useState之前，首先来看看hook和update的数据结构

hook：
  • queue：上面有pending属性，pending也是一条环状链表，上面存放了未被更新的update，也就是说这些update会以next指针连接成环状链表。
  • memoizedState表示当前的状态
  • next：指向下一个hook，形成一条链表
 const hook = {//构建hook
   queue: {
     pending: null//未执行的update链表
   },
   memoizedState: null,//当前state
   next: null//下一个hook
 };
update：
  • action：是出发更新的函数
  • next：连接下一个update，形成一条环状链表
 const update = {//构建update
    action,
    next: null
  };

那接下来定义useState吧，分三个部分：

  • 创建hook或取到hook：
    1. 在mount的时候：调用mountWorkInProgressHook创建一个初始的hook，赋值useState传进来的初始值initialState
    2. 在update的时候：调用updateWorkInProgressHook，拿到当前正在工作的hook
  • 计算hook上未更新的状态：遍历hook上的pending链表，调用链表节点上的action函数，生成一个新的状态，然后更新hook上的状态。
  • 返回新的状态和dispatchAction传入queue参数
function useState(initialState) {
      //第1步：创建hook或取到hook
    let hook;
    if (isMount) {
      hook = mountWorkInProgressHook();
      hook.memoizedState = initialState;//初始状态
    } else {
      hook = updateWorkInProgressHook();
    }
        //第2步：计算hook上未更新的状态
    let baseState = hook.memoizedState;//初始状态
    if (hook.queue.pending) {
      let firstUpdate = hook.queue.pending.next;//第一个update

      do {
        const action = firstUpdate.action;
        baseState = action(baseState);//调用action计算新的状态
        firstUpdate = firstUpdate.next;//通过update的action计算state
      } while (firstUpdate !== hook.queue.pending);//当链表还没遍历完时 进行循环

      hook.queue.pending = null;//重置update链表
    }
    hook.memoizedState = baseState;//赋值新的state

        //第3步：返回新的状态和dispatchAction传入queue参数
    return [baseState, dispatchAction.bind(null, hook.queue)];//useState的返回
  }

接下来定义mountWorkInProgressHook和updateWorkInProgressHook这两个函数

  • mountWorkInProgressHook：在mount的时候调用，新创建一个hook对象，
    1. 如果当前fiber不存在memoizedState，那当前hook就是这个fiber上的第一个hook，将hook赋值给fiber.memoizedState
    2. 如果当前fiber存在memoizedState，那将当前hook接在workInProgressHook.next后面。
    3. 将当前hook赋值给workInProgressHook
  • updateWorkInProgressHook：在update的时候调用，返回当前的hook，也就是workInProgressHook，并且将workInProgressHook指向hook链表的下一个。
function mountWorkInProgressHook() {//mount时调用
    const hook = {//构建hook
      queue: {
        pending: null//未执行的update链表
      },
      memoizedState: null,//当前state
      next: null//下一个hook
    };
    if (!fiber.memoizedState) {
      fiber.memoizedState = hook;//第一个hook的话直接赋值给fiber.memoizedState
    } else {
      workInProgressHook.next = hook;//不是第一个的话就加在上一个hook的后面，形成链表
    }
    workInProgressHook = hook;//记录当前工作的hook
    return workInProgressHook;
  }

function updateWorkInProgressHook() {//update时调用
  let curHook = workInProgressHook;
  workInProgressHook = workInProgressHook.next;//下一个hook
  return curHook;
}

第四步：定义dispatchAction

  • 创建update，挂载载queue.pending上

    1. 如果之前queue.pending不存在，那创建的这个update就是第一个，则update.next = update
    2. 如果之前queue.pending存在，则将创建的这个update加入queue.pending的环状链表中

    1

  • 让isMount=false，并且赋值workInProgressHook，调用schedule进行更新渲染

function dispatchAction(queue, action) {//触发更新
  const update = {//构建update
    action,
    next: null
  };
  if (queue.pending === null) {
    update.next = update;//update的环状链表
  } else {
    update.next = queue.pending.next;//新的update的next指向前一个update
    queue.pending.next = update;//前一个update的next指向新的update
  }
  queue.pending = update;//更新queue.pending

  isMount = false;//标志mount结束
  workInProgressHook = fiber.memoizedState;//更新workInProgressHook
  schedule();//调度更新
}

最终代码

import React from "react";
import ReactDOM from "react-dom";

let workInProgressHook;//当前工作中的hook
let isMount = true;//是否时mount时

const fiber = {//fiber节点
  memoizedState: null,//hook链表
  stateNode: App//dom
};

const Dispatcher = (() => {//Dispatcher对象
  function mountWorkInProgressHook() {//mount时调用
    const hook = {//构建hook
      queue: {
        pending: null//未执行的update链表
      },
      memoizedState: null,//当前state
      next: null//下一个hook
    };
    if (!fiber.memoizedState) {
      fiber.memoizedState = hook;//第一个hook的话直接赋值给fiber.memoizedState
    } else {
      workInProgressHook.next = hook;//不是第一个的话就加在上一个hook的后面，形成链表
    }
    workInProgressHook = hook;//记录当前工作的hook
    return workInProgressHook;
  }
  function updateWorkInProgressHook() {//update时调用
    let curHook = workInProgressHook;
    workInProgressHook = workInProgressHook.next;//下一个hook
    return curHook;
  }
  function useState(initialState) {
    let hook;
    if (isMount) {
      hook = mountWorkInProgressHook();
      hook.memoizedState = initialState;//初始状态
    } else {
      hook = updateWorkInProgressHook();
    }

    let baseState = hook.memoizedState;//初始状态
    if (hook.queue.pending) {
      let firstUpdate = hook.queue.pending.next;//第一个update

      do {
        const action = firstUpdate.action;
        baseState = action(baseState);
        firstUpdate = firstUpdate.next;//循环update链表
      } while (firstUpdate !== hook.queue.pending);//通过update的action计算state

      hook.queue.pending = null;//重置update链表
    }
    hook.memoizedState = baseState;//赋值新的state

    return [baseState, dispatchAction.bind(null, hook.queue)];//useState的返回
  }

  return {
    useState
  };
})();

function dispatchAction(queue, action) {//触发更新
  const update = {//构建update
    action,
    next: null
  };
  if (queue.pending === null) {
    update.next = update;//update的环状链表
  } else {
    update.next = queue.pending.next;//新的update的next指向前一个update
    queue.pending.next = update;//前一个update的next指向新的update
  }
  queue.pending = update;//更新queue.pending

  isMount = false;//标志mount结束
  workInProgressHook = fiber.memoizedState;//更新workInProgressHook
  schedule();//调度更新
}

function App() {
  let [count, setCount] = Dispatcher.useState(1);
  let [age, setAge] = Dispatcher.useState(10);
  return (
    <>
      <p>Clicked {count} times</p>
      <button onClick={() => setCount(() => count + 1)}> Add count</button>
      <p>Age is {age}</p>
      <button onClick={() => setAge(() => age + 1)}> Add age</button>
    </>
  );
}

function schedule() {
  ReactDOM.render(<App />, document.querySelector("#root"));
}

schedule();

预览效果：https://codesandbox.io/s/custom-hook-tyf19?file=/src/index.js

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/346288.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【软件测试】团队测试技术体现，遇到不可复现bug处理方式......

【软件测试】团队测试技术体现，遇到不可复现bug处理方式......

目录&#xff1a;导读前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09;前言 测试技术带来的是PP…
阅读更多...
ThingsBoard-规则链-check alarm status

ThingsBoard-规则链-check alarm status

1、概述 从今天开始，专门讲解ThingsBoard的规则链，每一个节点都会详细讲解，并且配套案例，让大家都能理解，喜欢请点个关注。今天讲的是筛选器的第第一个节点【check alarm status】，意思是检测告警状态。 2、节点理解 2.1、概述 【check alarm status】节点如图所示：…
阅读更多...
解立方根-蓝桥杯

解立方根-蓝桥杯

题目 分析 主要是运用二分法使复杂度减低。 代码 #include<iostream> #include<iomanip> #include<cmath> using namespace std; #define double long double const double eps 1e-12; int main() {int T 1;cin >> T;while (T--){double n;cin &g…
阅读更多...
LMS 最佳实践：学习管理系统中的知识管理！

LMS 最佳实践：学习管理系统中的知识管理！

企业需要在整个组织中收集、存储和传播知识。我们被信息淹没了&#xff0c;因此应该充分利用学习管理系统&#xff08;LMS&#xff09;来组织业务资产并支持知识管理&#xff08;KM&#xff09;战略。LMS 不仅仅是一个捕获电子学习单元和多项选择题的系统。它很可能没有充分发挥…
阅读更多...
代码随想录算法训练营第二十八天 | 491.递增子序列，46.全排列，47.全排列 II

代码随想录算法训练营第二十八天 | 491.递增子序列，46.全排列，47.全排列 II

一、参考资料递增子序列题目链接/文章讲解&#xff1a;https://programmercarl.com/0491.%E9%80%92%E5%A2%9E%E5%AD%90%E5%BA%8F%E5%88%97.html 视频讲解&#xff1a;https://www.bilibili.com/video/BV1EG4y1h78v 全排列题目链接/文章讲解&#xff1a;https://programmercarl.…
阅读更多...
从零学架构-基础部分

从零学架构-基础部分

一、架构的基础将学习的架构设计知识总结出来&#xff0c;分享给大家。1.1什么是架构架构和框架是什么关系&#xff1f;有什么区别?Linux有架构&#xff0c;MySQL有架构&#xff0c;JVM也有架构&#xff0c;应该关注哪个架构&#xff1f;金融有架构&#xff0c;支付有架构&…
阅读更多...
【排序算法】数据结构排序详解

【排序算法】数据结构排序详解

前言&#xff1a; 今天我们将讲解我们数据结构初阶的最后一部分知识的学习&#xff0c;也是最为“炸裂”的知识---------排序算法的讲解&#xff01;&#xff01;&#xff01;&#xff01; 目录1.排序的概念及其运用1.1排序的概念1.2排序运用2.常见排序算法的实现2.1 插入排序2…
阅读更多...
Java 基础面试题——集合

Java 基础面试题——集合

目录1.Java 有哪些常用容器&#xff08;集合&#xff09;&#xff1f;2.Collection 和 Collections 有什么区别&#xff1f;3.List、Set、Map 之间的区别是什么&#xff1f;4.HashMap 的长度为什么是 2 的 N 次方&#xff1f;源码中是如何保证的&#xff1f;5.HashMap 和 Hasht…
阅读更多...
ChatGPT 下一步，分配对象脱单有望

ChatGPT 下一步，分配对象脱单有望

ChatGPT 火了&#xff0c;上一次这么热闹还是上一次……那时最紧俏的概念叫元宇宙。 混沌时期&#xff0c;鱼龙混杂。资本市场靠新故事造梦&#xff0c;科技巨头争相加入竞赛&#xff0c;也有脑子活泛的已经利用它的巨大热度搞上了小钱钱——活跃在某宝某鱼上&#xff0c;贩卖…
阅读更多...
2023版Java面试汇总！全面对标阿里P7，学完，化身offer收割机

2023版Java面试汇总！全面对标阿里P7，学完，化身offer收割机

最近内卷严重&#xff0c;各种跳槽裁员&#xff0c;本文主要是为了帮大家快速回顾Java中知识点&#xff0c;这套&#xff08;详细笔记/面试题&#xff09;它几乎涵盖了所有的Java技术栈面试题和答案&#xff0c;相信可以帮助大家在金三银四&#xff0c;最短的时间内用作学习和面…
阅读更多...
基于微信小程序的优选驾考小程序

基于微信小程序的优选驾考小程序

文末联系获取源码 开发语言&#xff1a;Java 框架&#xff1a;ssm JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7/8.0 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.3.9 浏览器…
阅读更多...
SpringBoot查询接口传入参数为List，XML的写法

SpringBoot查询接口传入参数为List，XML的写法

✉️ 查询业务 ➿ 目前互联网项目的诸多业务中数查询业务居多&#xff0c;而查询业务中又数展示类接口、报表类接口是我们接触最多的查询类接口。在实际项目中&#xff0c;不是全局查询数据就做完了业务&#xff0c;这样的需求也没有意义。条件查询因此作为最普遍的查询业务&am…
阅读更多...
软件测试之优秀的产品质量评估模型的特征

软件测试之优秀的产品质量评估模型的特征

产品质量评估中的几个场景&#xff1a; 场景1&#xff1a;项目计划的时间到了&#xff0c;就发布产品。 场景2&#xff1a;将缺陷修复率作为产品的质量目标。产品必须达到一定的缺陷修复率&#xff0c;才能发布。 场景3&#xff1a;我们为产品建立了很多指标来作为质量目标&…
阅读更多...
报表开发工具FastReport .Net 如何在移动端生成Web报表应用？

报表开发工具FastReport .Net 如何在移动端生成Web报表应用？

FastReport .Net是一款全功能的Windows Forms、ASP.NET和MVC报表分析解决方案&#xff0c;使用FastReport .NET可以创建独立于应用程序的.NET报表&#xff0c;同时FastReport .Net支持中文、英语等14种语言&#xff0c;可以让你的产品保证真正的国际性。专业版和企业版包括Fast…
阅读更多...
软件测试1-测试就是找茬游戏

软件测试1-测试就是找茬游戏

软件测试是找茬游戏以前有一个很火的游戏叫《大家来找茬》&#xff0c;我玩这个游戏很厉害&#xff0c;在这个游戏中&#xff0c;两幅图中有几个不一样的地方&#xff0c;有些地方很明显&#xff0c;一眼就能看到&#xff0c;有的地方隐藏得比较深&#xff0c;要仔细看才能看清…
阅读更多...
2PC（两阶段提交）方案

2PC（两阶段提交）方案

XA方案2PC的传统方案是在数据库层面实现的&#xff0c;如Oracle、MySQL都支持2PC协议&#xff0c;为了统一标准减少行业内不必要的对接成本&#xff0c;需要制定标准化的处理模型及接口标准&#xff0c;国际开放标准组织Open Group定义了分布式事务处理模型DTP&#xff08;Dist…
阅读更多...
“遥感+”蓝碳储量估算、红树林信息提取

“遥感+”蓝碳储量估算、红树林信息提取

大气温室气体浓度不断增加&#xff0c;导致气候变暖加剧&#xff0c;随之会引发一系列气象、生态和环境灾害。如何降低温室气体浓度和应对气候变化已成为全球关注的焦点。海洋是地球上最大的“碳库”,“蓝碳”即海洋活动以及海洋生物&#xff08;特别是红树林、盐沼和海草&…
阅读更多...
Fluent Python 笔记 第 13 章 正确重载运算符

Fluent Python 笔记 第 13 章 正确重载运算符

运算符重载的作用是让用户定义的对象使用中缀运算符(如 和 |)或一元运算符(如 - 和 ~)。说得宽泛一些&#xff0c;在 Python 中&#xff0c;函数调用(())、属性访问(.)和元素访问 / 切片 ([])也是运算符&#xff0c;不过本章只讨论一元运算符和中缀运算符。 13.1 运算符重载基…
阅读更多...
Tomcat安装、IDEA发布web项目及通过浏览器访问servlet程序

Tomcat安装、IDEA发布web项目及通过浏览器访问servlet程序

tomcat安装 在官网上下载tomcat安装包&#xff0c;推荐下载8.5版本 解压安装到任意磁盘&#xff0c;记住安装时的目录 在系统里找到高级系统设置——高级——环境变量——系统变量里的path——编辑——新建&#xff0c;内容填写tomcat中的bin路径的绝对路径。 在bin文件夹找…
阅读更多...
【3D目标检测】Pseudo-Stereo for Monocular 3D Object Detection in Autonomous Driving

【3D目标检测】Pseudo-Stereo for Monocular 3D Object Detection in Autonomous Driving

目录概述细节背景与整体流程图像级别生成特征级别生成损失函数学习深度感知的特征概述 本文是基于单目图像的3D目标检测方法。 【2021】【MonoDLE】 研究的问题: 能否借助立体图像检测算法提高单目图像检测的效果如何实现右侧图像的生成 解决的方法&#xff1a; 受启发于伪…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023