为什么避免在循环、条件或嵌套函数中调用 Hooks

为什么避免在循环、条件或嵌套函数中调用 Hooks

为了确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。

我们可以在单个组件中使用多个 State Hook 或 Effect Hook:

function Form() {// 1. 使用变量名为 name 的 stateconst [name, setName] = useState('Mary');// 2. 使用 effect 以保存 form 操作useEffect(function persistForm() {localStorage.setItem('formData', name);});// 3. 使用变量名为 surname 的 stateconst [surname, setSurname] = useState('Poppins');// 4. 使用 effect 以更新标题useEffect(function updateTitle() {document.title = name + ' ' + surname;});// ...
}

那么 React 怎么知道哪个 state 对应哪个 useState?答案是 React 靠的是 Hook 调用的顺序。

let hookStates = []; // 放着此组件的所有的hooks数据
let hookIndex = 0; // 代表当前的hooks的索引
function useState(initialState){// 如果有老值取老值,没有取默认值hookStates[hookIndex] = hookStates[hookIndex] || initialState;// 暂存索引let currentIndex = hookIndex;//setState方法,将当前值置为新值function setState(newState){hookStates[currentIndex] = newState;//置完新值,立刻触发渲染render();}return [hookStates[hookIndex++], setState];
}

因为我们的示例中,Hook 的调用顺序在每次渲染中都是相同的,所以它能够正常工作:

// ------------
// 首次渲染
// ------------
useState('Mary')           // 1. 使用 'Mary' 初始化变量名为 name 的 state
useEffect(persistForm)     // 2. 添加 effect 以保存 form 操作
useState('Poppins')        // 3. 使用 'Poppins' 初始化变量名为 surname 的 state
useEffect(updateTitle)     // 4. 添加 effect 以更新标题// -------------
// 二次渲染 
// useState - 不再使用传入的默认值,而是返回上次渲染时存储的状态值。
// useEffect 首先运行之前 useEffect 的清理函数(如果有的话),然后再运行新的副作用函数。
// -------------
useState('Mary')           // 1. 读取变量名为 name 的 state(Mary参数被忽略)
useEffect(persistForm)     // 2. 清除并替换上一次 form 的 effect
useState('Poppins')        // 3. 读取变量名为 surname 的 state(Poppins参数被忽略)
useEffect(updateTitle)     // 4. 清除并替换上一次更新标题的 effect// ...

useEffect Hook有什么作用?如何理解 替换与清除?

告诉 React 需要在完成DOM更新之后(渲染之后)执行一些“副作用”(如数据获取、手动更改DOM、设置订阅或者清除上一次的副作用等)。

useEffect(persistForm) 在首次渲染时添加了一个副作用,即 persistForm 函数。然后,在随后的组件更新(第二次渲染)中,相同的 useEffect(persistForm) 调用会首先清除前一次的副作用(如果 persistForm 返回了一个清除函数的话),然后再执行新的 persistForm 副作用。

这样确保了副作用是最新的,并且在多次渲染之间不会有冲突。这也是为什么我们说第二次和随后的渲染是“替换”前一次的副作用。

只要 Hook 的调用顺序在多次渲染之间保持一致,React 就能正确地将内部 state 和对应的 Hook 进行关联。但如果我们将一个 Hook (例如 persistForm effect) 调用放到一个条件语句中会发生什么呢?

比如:

// ???? 在条件语句中使用 Hook 违反第一条规则if (name !== '') {useEffect(function persistForm() {localStorage.setItem('formData', name);});}

在第一次渲染中 name !== ‘’ 这个条件值为 true,所以我们会执行这个 Hook。但是下一次渲染时我们可能清空了 name,表达式值变为 false。此时的渲染会跳过该 Hook,Hook 的调用顺序发生了改变:

useState('Mary')           // 1. 读取变量名为 name 的 state(参数被忽略)
// useEffect(persistForm)  // ???? 此 Hook 被忽略!
useState('Poppins')        // ???? 2(之前为 3)。读取变量名为 surname 的 state 失败
useEffect(updateTitle)     // ???? 3 (之前为 4)。替换更新标题的 effect 失败
  1. 第一次调用 useState('Mary'),此时 hookIndex=0,状态被存储在 hookStates[0]

  2. 然后我们跳过 useEffect(persistForm)

  3. 接下来的 useState('Poppins') 会使用 hookIndex=1,但在上一次渲染中,它使用了 hookIndex=2。这会导致 surname 的状态从错误的位置获取。

  4. 以此类推,后续的 useEffect(updateTitle) 也会使用错误的索引。

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

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

相关文章

Django REST Framework完整教程-RESTful规范-序列化和反序列数据-数据视图

文章目录 1.简介及安装2.案例模型2.1.创建模型2.2.安装mysql必要组件2.3.管理后台转中文2.4.启动后台 3.数据序列化4.RESTful规范4.1.协议、域名和版本4.2.uri(统一资源标识符)4.3.查增删改4.4.过滤信息(Filtering)4.5.状态码(Status Codes&a…

Systemverilog断言介绍(二)

3.2 IMMEDIATE ASSERTIONS 即时断言是最简单的断言语句类型。它们通常被认为是SystemVerilog过程代码的一部分,并在代码评估期间访问时进行评估。它们没有时钟或复位的概念(除非有时钟/复位控制其封闭的过程块),因此无法验证跨越时…

Linux-gitlab常用命令

gitlab常用命令 1、查看gitlab状态2、gitlab启动3、gitlab关闭 1、查看gitlab状态 gitlab-ctl status2、gitlab启动 gitlab-ctl start3、gitlab关闭 gitlab-ctl stop

零基础如何自学C#?

前言 本文来源于知乎的一个提问,提问的是一个大一软件工程专业的学生,他想要自学C#但是不知道该怎么去学,这让他感到很迷茫,希望有人能给他一些建议和提供一些学习方向。 个人建议 确认目标:自学C#首先你需要大概了解…

算法通关村第二关|白银|链表反转拓展【持续更新】

1.指定区间反转 1.1 头插法:将区间内遍历到的结点插入到起始处之前。 public ListNode reverseBetween(ListNode head, int left, int right) {ListNode dummyNode new ListNode(-1);dummyNode.next head;ListNode pre dummyNode;// 将pre移动到区间的前一位&a…

Swift基础

本文是个比较简单的学习笔记&#xff0c;更详细的内容见 Swift官方文档 1、相等性比较 Swift标准库用 < 和 运算符定义了 >、>、<&#xff0c;所以实现 Comparable 的 < 运算符就会自动得到这些运算符的实现&#xff0c;实际上 Comparable 继承自 Equatable&…

spring boot MongoDB实战

项目搭建 <?xml version"1.0" encoding"UTF-8"?><project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.0.0 …

谈谈 Redis 如何来实现分布式锁

谈谈 Redis 如何来实现分布式锁 基于 setnx 可以实现&#xff0c;但是不是可重入的。 基于 Hash 数据类型 Lua脚本 可以实现可重入的分布式锁。 获取锁的 Lua 脚本&#xff1a; 释放锁的 Lua 脚本&#xff1a; 但是还是存在分布式问题&#xff0c;比如说&#xff0c;一个客…

李宏毅机器学习笔记-半监督学习

半监督学习&#xff0c;一般应用于少量带标签的数据&#xff08;数量R&#xff09;和大量未带标签数据的场景&#xff08;数量U&#xff09;&#xff0c;一般来说&#xff0c;U>>R。 半监督学习一般可以分为2种情况&#xff0c;一种是transductive learning&#xff0c;…

GO 语言的方法??

GO 中的方法是什么&#xff1f; 前面我们有分享到 GO 语言的函数&#xff0c;他是一等公民&#xff0c;那么 GO 语言中的方法和函数有什么区别呢&#xff1f; GO 语言中的方法实际上和函数是类似的&#xff0c;只不过在函数的基础上多了一个参数&#xff0c;这个参数在 GO 语…

O2O优惠券预测

O2O优惠券预测 赛题理解赛题类型解题思路 数据探索理论知识数据可视化分布 特征工程赛题特征工程思路 模型训练与验证 赛题理解 赛题类型 本赛题要求提交的结果是预测15 天内用券的概率&#xff0c;这是一个连续值&#xff0c;但是因为用券只有用与不用两种情况&#xff0c;而…

Redis入门到实战(四、原理篇)RESP协议

目录 2、Redis内存回收-过期key处理3、Redis内存回收-内存淘汰策略 Redis是一个CS架构的软件&#xff0c;通信一般分两步&#xff08;不包括pipeline和PubSub&#xff09;&#xff1a; 客户端&#xff08;client&#xff09;向服务端&#xff08;server&#xff09;发送一条命令…

数字秒表VHDL实验箱精度毫秒可回看,视频/代码

名称&#xff1a;数字秒表VHDL精度毫秒可回看 软件&#xff1a;Quartus 语言&#xff1a;VHDL 代码功能&#xff1a; 数字秒表的VHDL设计&#xff0c;可以显示秒和毫秒。可以启动、停止、复位。要求可以存储6组时间&#xff0c;可以回看存储的时间 本资源内含2个工程文件&am…

2023 年程序员必读的 27 本软件开发书籍

不断发展的软件开发领域需要不断学习和改进。现代开发实践要求软件工程师具备全面的知识&#xff0c;包括各个领域的理论见解和实践技术&#xff0c;从编程语言和数据库管理到质量保证、网页设计和 DevOps 实践。 这就是编程书籍可以提供帮助的地方。通过及时了解此类书籍并应…

[题] 求特殊自然数 #十进制转n进制

题目 NOI / 1.5编程基础之循环控制-25:求特殊自然数 题解 首先&#xff0c;不可能无限穷举 范围限定&#xff1a;七进制与九进制表示都是三位数 最大&#xff1a;888(9) 728(10) 最小&#xff1a;100(7) 49(10) 然后就是十进制转x进制的问题 n对xa取模&#xff0c;就是对应…

模拟退火算法求解TSP问题(python)

模拟退火算法求解TSP的步骤参考书籍《Matlab智能算法30个案例分析》。 问题描述 TSP问题描述在该书籍的第4章 算法流程 部分实现代码片段 坐标轴转换成两点之间直线距离长度的代码 coordinates np.array([(16.47, 96.10),(16.47, 94.44),(20.09, 92.54),(22.39, 93.37),(2…

如何给Github上的开源项目提交PR?

前言 对于一个热爱开源的程序员而言&#xff0c;学会给GitHub上的开源项目提交PR这是迈出开源的第一步。今天我们就来说说如何向GitHub的开源项目提交PR&#xff0c;当然你提交的PR可以是一个项目的需求迭代、也可以是一个Bug修复、再或者是一些内容文本翻译等等&#xff0c;并…

单片机点亮led管(01)

如何开始学习单片机 1&#xff1a;实践第一 2&#xff1a;补充必要的理论知识&#xff0c;缺什么补什么 3&#xff1a;做工程积累经验&#xff08;可以在网络上收集题目&#xff0c;也可以有自己的想法大胆的实验&#xff09; 单片机是什么&#xff1f; 单片机&#xff08…

ES 数据库

ES 数据库 通过 API 查询通过 JSON 查询 熟悉 es 的同学都知道 es 一般有两种查询方式 1&#xff0c;在 java 中构建查询对象&#xff0c;调用 es 提供的 api 做查询 2&#xff0c;使用 json 调用接口做查询 查询语句无非是将足够的信息丢给数据库&#xff0c;但是它却和 SQL …

5分钟内在Linux上安装.NET Core应用程序

作为开源的忠实粉丝&#xff0c;我喜欢 .NET Core 的跨平台特性。它开启了无限的可能性&#xff0c;从业余爱好项目、实验和概念验证&#xff0c;到在具有高安全性和可扩展性的经济高效基础设施上运行的大规模高负载生产应用程序。我通常从任何云平台提供商那里获得最简单、最便…