React Hook 原理,及如何使用Hook

一、 Hook使用规则 

  • 只在最顶层使用Hook

  • 不要在循环,条件或嵌套函数中调用Hook;

  • 只在组件函数和自定义hook中调用Hook

Q1 : 为什么 hook 不能 在循环,条件或嵌套函数中调用Hook ? 

 A1:  因为这跟React的渲染函数和React Hook的实现原理有关,如果在循环,条件或嵌套函数中调用hook,会影响到了React自身记录的Hook顺序,会导致组件状态(值)不一致问题。

Q2: 为什么组件内,刷新了一次后,useState 仍然能保持最新的值,而不是回到初始值? 

A2:  这是因为,useState 这个hook底层逻辑是利用闭包原理,它会把最新的值,初始化的值,下一个要调用的hook这些值创建成一个fiber对象,后面每次刷新都会从这个fiber对象上获取。

     

二、 简单实现一个 useState 

demo1 : 问题在每次刷新,值都是初始化

function useState(initialValue) {var state = initialValue;function setState(newState) {state = newState;render();}return [state, setState];
}

demo2 :  问题在,如果组件内使用多个useState, _state 值会被覆盖

var _state; // 把 state 存储在外面function useState(initialValue) {_state = _state || initialValue; // 如果没有 _state,说明是第一次执行,把 initialValue 复制给它function setState(newState) {_state = newState;render();}return [_state, setState];
}

demo3:    按照hook的顺序,把state值依次存进  memoizedState  中 。

这就是为什么  hook 不能 在循环,条件或嵌套函数中调用Hook , 因为这样会影响React自身记录的Hook顺序。

let memoizedState = []; // hooks 存放在这个数组
let cursor = 0; // 当前 memoizedState 下标function useState(initialValue) {memoizedState[cursor] = memoizedState[cursor] || initialValue;const currentCursor = cursor;function setState(newState) {memoizedState[currentCursor] = newState;render();}return [memoizedState[cursor++], setState]; // 返回当前 state,并把 cursor 加 1
}

三、 真正实现一个 useState 

虽然我们用数组基本实现了一个可用的 Hooks,了解了 Hooks 的原理,但在 React 中,实现方式却有一些差异的。

  • React 中是通过类似单链表的形式来代替数组的。通过 next 按顺序串联所有的 hook。

    type Hooks = {memoizedState: any, // 指向当前渲染节点 FiberbaseState: any, // 初始化 initialState, 已经每次 dispatch 之后 newStatebaseUpdate: Update<any> | null,// 当前需要更新的 Update ,每次更新完之后,会赋值上一个 update,方便 react 在渲染错误的边缘,数据回溯queue: UpdateQueue<any> | null,// UpdateQueue 通过next: Hook | null, // link 到下一个 hooks,通过 next 串联每一 hooks
    }type Effect = {tag: HookEffectTag, // effectTag 标记当前 hook 作用在 life-cycles 的哪一个阶段create: () => mixed, // 初始化 callbackdestroy: (() => mixed) | null, // 卸载 callbackdeps: Array<mixed> | null,next: Effect, // 同上 
    };

  • memoizedState,cursor 是存在哪里的?如何和每个函数组件一一对应的?

    我们知道,react 会生成一棵组件树(或Fiber 单链表),树中每个节点对应了一个组件,hooks 的数据就作为组件的一个信息,存储在这些节点上,伴随组件一起出生,一起死亡。

参考: 

【React全解3】React.useState原理详解,一次性搞懂useState_react usestate-CSDN博客

React Hooks 原理 · Issue #26 · brickspert/blog · GitHub

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

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

相关文章

Gin 框架介绍与快速入门

Gin 框架介绍与快速入门 文章目录 Gin 框架介绍与快速入门一、Gin框架介绍1. 快速和轻量级2. 路由和中间件3. JSON解析4. 支持插件5. Gin相关文档 二、基本使用1.安装2.导入3.第一个Gin 应用 三、应用举例四、Gin 入门核心1.gin.Engine2.gin.Context 一、Gin框架介绍 Gin是一个…

LLM Agent之再谈RAG的召回多样性优化

1. Query多样性 2019 Query Expansion Techniques for Information Retrieval: a Survey 传统搜索Query的扩展&#xff0c;有基于用户搜索日志挖掘的相似Query&#xff0c;有基于相同召回文档关联的相似Query&#xff0c;也有基于SMT的Query改写方案。那和大模型时代更搭配的自…

YOLOv8改进 | 2023Neck篇 | 利用Gold-YOLO改进YOLOv8对小目标检测

一、本文介绍 本文给大家带来的改进机制是Gold-YOLO利用其Neck改进v8的Neck,GoLd-YOLO引入了一种新的机制——信息聚集-分发(Gather-and-Distribute, GD)。这个机制通过全局融合不同层次的特征并将融合后的全局信息注入到各个层级中,从而实现更高效的信息交互和融合。这种…

ssl证书(https/wss)内网测试

前言 一般后端部署到外网&#xff0c;可以去申请免费的SSL 证书&#xff0c; 但在内网测试时&#xff0c;需要自己生成证书 本章主要讲述ssl证书生成 1:环境 生成证书 openssl &#xff08;windows or linux 都行) 2:生成证书 1>生成私钥 pkcs#1私钥 openssl genrsa -out…

有详细一些的考研数学真题解析吗?

考研数学真题解析可以写得很详细&#xff0c;但是纸质资料可能受限于篇幅与排版等原因&#xff0c;没有把过程写得很详细。 但是&#xff0c;如果解析步骤不够详细的话&#xff0c;可能读者在看的时候就会因为其中某一个被省略的步骤而“卡壳”&#xff0c;进而需要花费很多额…

SpringBoot学习(三)-整合JDBC、Druid、MyBatis

注&#xff1a;此为笔者学习狂神说SpringBoot的笔记&#xff0c;其中包含个人的笔记和理解&#xff0c;仅做学习笔记之用&#xff0c;更多详细资讯请出门左拐B站&#xff1a;狂神说!!! 一、整合JDBC使用&#xff08;理解&#xff09; 创建项目 勾选依赖启动器 查看依赖 …

ElasticSearch集群(Windows)

文章目录 ElasticSearch集群&#xff08;Windows&#xff09;1. 修改配置文件2. 启动ES集群3. 使用cerebro查看集群4. 使用postman查看集群5. 测试集群添加和查询索引5.1 在9201节点添加product索引5.2 在9203查看product索引 ElasticSearch集群&#xff08;Windows&#xff09…

使用Apache POI将数据写入Excel文件

首先导入依赖 <dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactId><version>3.16</version> </dependency> <dependency><groupId>org.apache.poi</groupId><artifactId>po…

简单多状态dp问题(打家劫舍Ⅱ)

通过分类谈论&#xff0c;将环形的问题&#xff0c;转化成两个线性的 “ 打家劫舍Ⅰ ” 1.状态表示 2.状态转移方程 3.初始化 f[ 0 ] nums[ 0 ] g[ 0 ] 0 4.填表顺序 从左往右填表&#xff0c;两个表一块填 5.返回值 max( f[ n-1 ] , g [ n - 1 ] )

DRF从入门到精通七(频率源码分析、接口文档、JWT介绍、构成原理、Base64编码与解码、jwt的开发重点)

文章目录 一、频率源码分析APIView的频率源码分析SimpleRateThrottle 频率类源码分析 二、项目自动生成API接口文档1.CoreAPI定义文档接口描述信息 2.Swagger3.接口文档规范 三、Cookie、Session、Token介绍1.Cookie介绍2.Session介绍3.Cookie和Session的区别4.Token介绍 四、J…

使用 PHP-FFMpeg 操作视频/音频文件

做音频合成的时候找到的一个php操作ffmpeg 的类库。GitHub地址&#xff1a;https://github.com/PHP-FFMpeg/PHP-FFMpeg/。本文的例子大部分都是上面的 在使用之前请安装好 FFMpeg 。如何安装&#xff1f;请看 FFmpeg 安装教程。 使用composer快速安装 > composer require …

灸哥问答:数据结构对软件开发的作用

在软件开发的浩瀚海洋中&#xff0c;数据结构如同一座坚固的灯塔&#xff0c;为开发者指明方向&#xff0c;确保他们在构建复杂系统时不会迷失。数据结构不仅仅是编程的基础&#xff0c;更是高效、稳定、可扩展软件的核心。 一、提升算法效率 数据结构与算法紧密相连&#xf…