React16源码: Hooks源码实现

Hooks

1 ）概述

  • Hooks 在 React16.7版本出现的新功能
  • Hooks 改变了整体应用开发的模式，同时开发体验会和以前会变得不一样
  • Hooks 让函数组件具有类组件的能力
    • 在 function component 里面没有this无法保存 state
    • 通过 Hooks可以让 function component 代替 class component
    • Hooks 让函数组件变得更强大

2 ）用例演示

import React, { useState, useEffect } from 'react'export default () => {const [name, setName] = useState('Wang')useEffect(() => {console.log('component update')return () => {console.log('unbind')}}, [])return (<><p>My Name is: {name}</p><input type="text" value={name} onChange={e => setName(e.target.value)} /></>)
}
  • 这里声明了一个functional component ，在以前对比class component它缺少的是什么
    • 缺少就是this对象，它没有this对象，那么它就不能有 this.state
    • 它就具有包含自己本身的状态的这么一个功能
    • 它没有生命周期方法
  • 在这里面我们使用了hooks来给我们的组件去存储了 state
    • 使用 useState 传入了一个默认值是 Wang
    • 然后它返回一个数组，这是一个数组的解构
    • 这个数组第一项是state的对应的这个变量
    • 第二项是让我们去改变这个state的方法
    • 这就是我们通过useState返回给我们的唯一的两个东西
  • 然后我们就可以在我们渲染的过程当中去使用这个state了，同样可以去修改这个state
    • 比如说我们绑定了这个input的 onchange 事件
    • 就是去修改这个state，就是我们的name
    • 输入的内容之后它的state就自动更新
    • 在下一次渲染的时候能够拿到 state
  • 这就是hooks，它给 function component 提供了class component 所具有的能力
    • 它的意义不仅仅是为了替代 class compoment
    • 是想要去帮助我们去拆分一些在组件内部的逻辑
    • 把他们提取出来，能够给更多的组件进行一个复用
    • 以前在class compoment 里面是很难去拆分这部分逻辑的
  • 还有一个是跟 class component 的最大区别，就是生命周期方法
    • 在function component 里面，使用hooks可以通过一个叫做useEffect的这个API
    • 这个东西呢我们就可以传入一个方法，这个方法里面
    • 比如说,随便写一句 component updated
    • 在hooks里面，他没有着重的去区分 mounted 和 updated
    • 它的理念是 mounted和updated 都是 updated
    • 每一次有组件内容更新的时候都会去调用我们传入的这个 effect 回调函数
  • 如果需要事件绑定什么的，之前在unmount的时候，去解除事件绑定，那这时怎么办
    • 很简单，看到上面 return一个方法，这个方法就是解除我们的绑定，这边叫做 unbind
    • 在目前这种情况下，每一次有更新的时候都会先执行unbind，然后再重新bind
    • 这是比较符合react更新的一个逻辑的，就是在它有任何更新的时候
    • 都会把之前的状态全部消除，然后返回新的状态
  • 当然这对于一些事件监听的绑定不是特别友好, 解决方案如下
    • 把它改造成行为，类似于 componentDidMount 和 componentWillUnmount
    • 直接在这个 useEffect 传入第二个参数，然后传一个空数组
    • 比如说传入一个props来进行一个它是否有变化的一个区分
    • 如果传一个空数组，它就没有东西区分，就代表着只要执行一次
    • 这样，在输入改变state时，就没有了，只再刷新后，才会执行一次
  • 同样，在跳出的时候打印输出了 unbind
  • 这就是我们使用 hooks 模拟生命周期方法的一个用法

3 ) 源码分析

这个要在 React 16.7 版本上来找，在 React.js 中可看到

import {useCallback,// ... 很多 khoos
} from './ReactHooks';

现在定位到 ReactHooks.js

/*** Copyright (c) Facebook, Inc. and its affiliates.** This source code is licensed under the MIT license found in the* LICENSE file in the root directory of this source tree.** @flow*/import type {MutableSource,MutableSourceGetSnapshotFn,MutableSourceSubscribeFn,ReactContext,
} from 'shared/ReactTypes';
import type {OpaqueIDType} from 'react-reconciler/src/ReactFiberHostConfig';import invariant from 'shared/invariant';import ReactCurrentDispatcher from './ReactCurrentDispatcher';type BasicStateAction<S> = (S => S) | S;
type Dispatch<A> = A => void;function resolveDispatcher() {const dispatcher = ReactCurrentDispatcher.current;invariant(dispatcher !== null,'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +' one of the following reasons:\n' +'1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +'2. You might be breaking the Rules of Hooks\n' +'3. You might have more than one copy of React in the same app\n' +'See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.',);return dispatcher;
}export function useContext<T>(Context: ReactContext<T>,unstable_observedBits: number | boolean | void,
): T {const dispatcher = resolveDispatcher();if (__DEV__) {if (unstable_observedBits !== undefined) {console.error('useContext() second argument is reserved for future ' +'use in React. Passing it is not supported. ' +'You passed: %s.%s',unstable_observedBits,typeof unstable_observedBits === 'number' && Array.isArray(arguments[2])? '\n\nDid you call array.map(useContext)? ' +'Calling Hooks inside a loop is not supported. ' +'Learn more at https://reactjs.org/link/rules-of-hooks': '',);}// TODO: add a more generic warning for invalid values.if ((Context: any)._context !== undefined) {const realContext = (Context: any)._context;// Don't deduplicate because this legitimately causes bugs// and nobody should be using this in existing code.if (realContext.Consumer === Context) {console.error('Calling useContext(Context.Consumer) is not supported, may cause bugs, and will be ' +'removed in a future major release. Did you mean to call useContext(Context) instead?',);} else if (realContext.Provider === Context) {console.error('Calling useContext(Context.Provider) is not supported. ' +'Did you mean to call useContext(Context) instead?',);}}}return dispatcher.useContext(Context, unstable_observedBits);
}export function useState<S>(initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {const dispatcher = resolveDispatcher();return dispatcher.useState(initialState);
}export function useReducer<S, I, A>(reducer: (S, A) => S,initialArg: I,init?: I => S,
): [S, Dispatch<A>] {const dispatcher = resolveDispatcher();return dispatcher.useReducer(reducer, initialArg, init);
}export function useRef<T>(initialValue: T): {|current: T|} {const dispatcher = resolveDispatcher();return dispatcher.useRef(initialValue);
}export function useEffect(create: () => (() => void) | void,deps: Array<mixed> | void | null,
): void {const dispatcher = resolveDispatcher();return dispatcher.useEffect(create, deps);
}export function useLayoutEffect(create: () => (() => void) | void,deps: Array<mixed> | void | null,
): void {const dispatcher = resolveDispatcher();return dispatcher.useLayoutEffect(create, deps);
}export function useCallback<T>(callback: T,deps: Array<mixed> | void | null,
): T {const dispatcher = resolveDispatcher();return dispatcher.useCallback(callback, deps);
}export function useMemo<T>(create: () => T,deps: Array<mixed> | void | null,
): T {const dispatcher = resolveDispatcher();return dispatcher.useMemo(create, deps);
}export function useImperativeHandle<T>(ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,create: () => T,deps: Array<mixed> | void | null,
): void {const dispatcher = resolveDispatcher();return dispatcher.useImperativeHandle(ref, create, deps);
}export function useDebugValue<T>(value: T,formatterFn: ?(value: T) => mixed,
): void {if (__DEV__) {const dispatcher = resolveDispatcher();return dispatcher.useDebugValue(value, formatterFn);}
}export const emptyObject = {};export function useTransition(): [(() => void) => void, boolean] {const dispatcher = resolveDispatcher();return dispatcher.useTransition();
}export function useDeferredValue<T>(value: T): T {const dispatcher = resolveDispatcher();return dispatcher.useDeferredValue(value);
}export function useOpaqueIdentifier(): OpaqueIDType | void {const dispatcher = resolveDispatcher();return dispatcher.useOpaqueIdentifier();
}export function useMutableSource<Source, Snapshot>(source: MutableSource<Source>,getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
): Snapshot {const dispatcher = resolveDispatcher();return dispatcher.useMutableSource(source, getSnapshot, subscribe);
}

  • 定位到 useState

    export function useState<S>(initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {const dispatcher = resolveDispatcher();return dispatcher.useState(initialState);
}
    • 这边调用了一个 dispatcher.useState(initialState);
    • 这个dispatch等于 const dispatcher = resolveDispatcher();

  • 对应的再去找到这个 resolveDispatcher ，它是个function

    function resolveDispatcher() {const dispatcher = ReactCurrentOwner.currentDispatcher;invariant(dispatcher !== null,'Hooks can only be called inside the body of a function component.',);return dispatcher;
}
    • 可看到是通过 ReactCurrentOwner.currentDispatcher 去获取的
    • 这个就要涉及到后续react-dom渲染的过程
    • 在我们使用阶段，是没有拿到任何真正节点的实例的。
    • 比如在我们创建了react element，我们传进去的是这个class component的类
    • 而不是它的一个new的一个实例，拿不到对应的东西
    • 只有在 react-dom 进行真正的渲染的过程当中，才会去为我们创建这个实例
    • 它这边提供了这个方法，在实际调用是要在我们的 react-dom进行渲染的时候
    • 它才会为我们这个 ReactCurrentOwner 去设置属性

  • ReactCurrentOwner 它是一个全局的类，定位一下

    /*** Copyright (c) Facebook, Inc. and its affiliates.** This source code is licensed under the MIT license found in the* LICENSE file in the root directory of this source tree.** @flow*/import type {Fiber} from 'react-reconciler/src/ReactFiber';
import typeof {Dispatcher} from 'react-reconciler/src/ReactFiberDispatcher';/*** Keeps track of the current owner.** The current owner is the component who should own any components that are* currently being constructed.*/
const ReactCurrentOwner = {/*** @internal* @type {ReactComponent}*/current: (null: null | Fiber),currentDispatcher: (null: null | Dispatcher),
};export default ReactCurrentOwner;

  • 我们可以看到 ReactCurrentOwner ，它就是一个对象，里面有两个属性

  • 一个是 current , 就是这个current就对应正在目前正在渲染的哪一个节点的一个实例

  • currentDispatcher 是实例对应的 dispatcher

  • 它一开始初始化的时候，是两个 null

  • 然后到后期每一个组件进行渲染的时候，它才会进行一个渲染

  • 就跟我们在class component里面看到的，它的 setState 调用的是 this.updateSetState

  • 在这里的 dispatch 也是从不同平台上面，它传入进来的一个东西，不是我们在react中定义的

  • 所以在react中我们可以看到的源码就非常的简单，就是这么一些相关的东西

  • 同理，useEffect和其他内容也基本是类似的，只不过它最终调用的方法会不一样

  • 比如说useReducer，那么它调用的是 dispatcher.useReducer

  • 它们最终都是调用 dispatcher 上面的方法

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

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

相关文章

PSoc62™开发板之串口通信

PSoc62™开发板之串口通信

实验目的 1.使用串口和PC机通信&#xff1a;接收和发送信息 2.接收GNSS模块定位信息 实验准备 PSoc62™开发板CH340 USB转TTL模块ATGM332D GNSS模块公母头杜邦线x4 板载资源 板载有多少uart 创建工程例程&#xff0c;在libraries/HAL_Drivers/uart_config.h中查看BSP支持…
阅读更多...
跨境电商如何通过API选品文章

跨境电商如何通过API选品文章

跨境电商通过API选品是一个相对复杂的过程&#xff0c;涉及到多个环节和考虑因素。以下是一个简化的概述&#xff0c;介绍了如何通过API进行选品&#xff0c;由于字数限制&#xff0c;这里仅能展示部分内容&#xff0c;如需5000字的文章&#xff0c;可能需要根据这个提纲进一步…
阅读更多...
凯越推出复古150踏板欧洲先上？DAE150/150亮相

凯越推出复古150踏板欧洲先上？DAE150/150亮相

今天临下班发现凯越在欧洲的官网上更新了一台复古踏板&#xff0c;外观别说还有点精致的意思&#xff0c;一共分为125和150两个配置&#xff0c;都是采用的水冷单缸发动机。 配置和参数等数据简单过一下&#xff0c;这种车型更多的是看外观了&#xff0c;仪表采用的LCD的显示屏…
阅读更多...
MySQL之四大引擎、账号管理以及建库认识

MySQL之四大引擎、账号管理以及建库认识

目录 一、数据库存储引擎&#xff08;发动机&#xff09; 1.1、认识引擎 1.2、查看存储引擎 1.3、引擎常识 1.4、support字段说明 1.5、四大引擎 二、数据库管理 2.1、元数据库介绍&#xff1a; 2.2、分类&#xff1a; 2.3、增删改查以及使用操作 2.4、权限 三、数…
阅读更多...
ArkTS语言应用开发入门指南与简单案例解析

ArkTS语言应用开发入门指南与简单案例解析

文章目录 前言创建项目及其介绍简单案例学习本文总结问答回顾-学习前言 在前几节课中，我们已经了解了ArkTS语言的特点以及其基本语法。现在，我们将正式利用ArkTS来进行应用开发。本节课将通过一个快速入门案例，让大家熟悉开发工具的用法，并介绍UI的基础概念。 创建项目及…
阅读更多...
Mnist手写体数字数据集介绍与在Pytorch中使用

Mnist手写体数字数据集介绍与在Pytorch中使用

1.介绍 MNIST&#xff08;Modified National Institute of Standards and Technology&#xff09;数据集是一个广泛用于机器学习和计算机视觉研究的常用数据集之一。它由手写数字图像组成&#xff0c;包括0到9的数字&#xff0c;每张图像都是28x28像素的灰度图像&#xff0c;图…
阅读更多...
探索大模型语言（LLM）科技的革新

探索大模型语言（LLM）科技的革新

文章目录 一. 引言二. 了解大模型语言2.1 什么是LLM&#xff1f;2.2 大模型与大模型语言的区分 三. 机器学习3.1 AI开发3.2 机器学习服务 四. 大模型的应用场景五. 全篇总结 一. 引言 自然语言处理领域的发展取得了巨大的突破&#xff0c;其中广义语言模型&#xff08;LLM&…
阅读更多...
pytorch学习笔记

pytorch学习笔记

torchvision处理图像的 pytorch官网上看数据集的包&#xff0c;COCO数据集目标检测、语义分割&#xff0c;cifar物体识别 预训练好的模型 这个模块是图片的处理 root-位置&#xff0c;train-创建的true是个训练集&#xff0c;transform 前面是输出图片的数据类型&#xff0c;“…
阅读更多...
ByteTrack算法流程的简单示例

ByteTrack算法流程的简单示例

ByteTrack ByteTrack算法是将t帧检测出来的检测框集合 D t {\mathcal{D}_{t}} Dt​ 和t-1帧预测轨迹集合 T ~ t − 1 {\tilde{T}_{t-1}} T~t−1​ 进行匹配关联得到t帧的轨迹集合 T t {T_{t}} Tt​。 首先使用检测器检测t帧的图像得到检测框集合 D t {\mathcal{D}_{t}} …
阅读更多...
md文件图片上传方案：Github+PicGo 搭建图床

md文件图片上传方案：Github+PicGo 搭建图床

文章目录 1. PicGo 下载2. 配置Github3. 配置PicGo4. PicGo集成Typora4.1 picGo监听端口设置 5. 测试 1. PicGo 下载 下载地址&#xff1a;https://molunerfinn.com/PicGo/ 尽量下载稳定版本 2. 配置Github 1. 创建一个新仓库&#xff0c;用于存放图片 2. 生成一个token&a…
阅读更多...
【安卓的签名和权限】

【安卓的签名和权限】

Android 编译使用哪个key签名&#xff1f; 一看Android.mk 在我们内置某个apk的时候都会带有Android.mk&#xff0c;这里面就写明了该APK使用的是什么签名&#xff0c;如&#xff1a; LOCAL_CERTIFICATE : platform表明使用的是platform签名 LOCAL_CERTIFICATE : PRESIGNED…
阅读更多...
Redis 生产环境查找无过期时间的 key

Redis 生产环境查找无过期时间的 key

在项目中，Redis 不应该被当作传统数据库来使用；储存大量没有过期时间的数据。如果储存大量无过期时间，而且无效的key的话；再加上 Redis 本身的过期策略没有被正确设置，就会大量占用内存。这样就会导致再多的内存资源也不够用。 情况大致是这样，项目中采用 Redis 二级存储…
阅读更多...
SpringBoot整合ElasticSearch实现CRUD操作

SpringBoot整合ElasticSearch实现CRUD操作

本文来说下SpringBoot整合ES实现CRUD操作 文章目录 概述项目搭建ES简单的crud操作保存数据修改数据查看数据删除数据 本文小结 概述 SpringBoot支持两种技术和es交互。一种的jest&#xff0c;还有一种就是SpringData-ElasticSearch。根据引入的依赖不同而选择不同的技术。反正作…
阅读更多...
leetcode2967. 使数组成为等数数组的最小代价

leetcode2967. 使数组成为等数数组的最小代价

文章目录 题目思路复杂度Code 题目 给你一个长度为 n 下标从 0 开始的整数数组 nums 。 你可以对 nums 执行特殊操作 任意次 &#xff08;也可以 0 次&#xff09;。每一次特殊操作中&#xff0c;你需要 按顺序 执行以下步骤&#xff1a; 从范围 [0, n - 1] 里选择一个下标 …
阅读更多...
代码随想录算法训练营Day16 | 654.最大二叉树、617.合并二叉树、700.二叉搜索树中的搜索、98.验证二叉搜索树

代码随想录算法训练营Day16 | 654.最大二叉树、617.合并二叉树、700.二叉搜索树中的搜索、98.验证二叉搜索树

LeetCode 654 最大二叉树 本题思路&#xff1a;我们可以看到每次其实这个找最大值&#xff0c;然后创建节点的过程就是一个二叉树的前序遍历的过程。所以&#xff0c;我们可以递归来完成它。 先创找到数组中&#xff0c;最大的值的下标&#xff0c;然后创建根节点然后根据下标…
阅读更多...
pytest装饰器：@pytest.mark.incremental

pytest装饰器：@pytest.mark.incremental

pytest.mark.incremental 是一个pytest中的装饰器&#xff0c;用于标记增量测试。增量测试是一种测试策略&#xff0c;它将测试分解成多个递增的步骤或阶段&#xff0c;并按顺序执行这些步骤。 pytest.mark.incremental 装饰器的作用是告诉pytest&#xff0c;该测试函数是一个…
阅读更多...
c语言-整型在内存的存储

c语言-整型在内存的存储

文章目录 前言一、整型数值在内存中的存储1.1 整型数值的表示形式1.2 二进制的表示形式1.3 整数在内存中存储 二、大端字节序存储和小端字节序存储2.1 大端字节序存储2.2 小端字节序存储2.3 练习 总结 前言 本篇文章叙述c语言中整型数据在内存中的存储方式。 一、整型数值在内…
阅读更多...
Vue学习计划-Vue3--核心语法（一）OptionsAPI、CompositionAPI与setup

Vue学习计划-Vue3--核心语法（一）OptionsAPI、CompositionAPI与setup

1. OptionsAPI与CompositionAPI Vue2的API设计是Options(配置)风格的Vue3的API设计是Composition(组合)风格的 Options API的弊端&#xff1a; Options类型的API&#xff0c;数据、方法、计算属性等&#xff0c;是分散在&#xff1a;data、methods、computed中的&#xff0c;若…
阅读更多...
【操作系统xv6】学习记录2 -RISC-V Architecture

【操作系统xv6】学习记录2 -RISC-V Architecture

说明&#xff1a;看完这节&#xff0c;不会让你称为汇编程序员&#xff0c;知识操作系统的前置。 ref&#xff1a;https://binhack.readthedocs.io/zh/latest/assembly/mips.html https://www.bilibili.com/video/BV1w94y1a7i8/?p7 MIPS MIPS的意思是 “无内部互锁流水级的微…
阅读更多...
Maple 2021安装包下载及安装教程

Maple 2021安装包下载及安装教程

Maple 2021下载链接&#xff1a;https://docs.qq.com/doc/DUk9MQ1BPRHRYWU9s 1.鼠标右键解压到“Maple 2021” 2.选中Setup&#xff0c;鼠标右击选择“以管理员身份运行” 3.点击“Next” 4.选择I accept the agreement&#xff0c;点击“Next” 5.选择软件安装路径&#xff0c…
阅读更多...
最新文章

Copyright @ 2022~2023