react 中的useState useEffect

下面的这些hook我们常用的一些

useState  useEffect useCallback、useMemo、useRef 和 useContex

下一个文章中讲述(useCallback、useMemo、useRef 和 useContex)

下面我将讲解什么时候使用是最好的

首先我们需要明确的一点是,这些hook都是在做缓存。

hook函数中依赖项:函数中使用的响应式变量组成的数组。响应式变量包括 props、state 和所有你直接在组件中定义的变量和函数。

目录

Hooks 是如何诞生的?

useState:让函数组件具有维持状态的能力

useEffect:执行副作用

理解 Hooks 的依赖


Hooks 是如何诞生的?

其实顺着函数组件的思路思考,就会发现,如果我们想要让函数组件更有用,目标就是给函数组件加上状态。这看上去似乎并不是难事。简单想一下,函数和对象不同,并没有一个实例的对象能够在多次执行之间保存状态,那势必需要一个函数之外的空间来保存这个状态,而且要能够检测其变化,从而能够触发函数组件的重新渲染。再进一步想,那我们是不是就是需要这样一个机制,能够把一个外部的数据绑定到函数的执行。当数据变化时,函数能够自动重新执行。这样的话,任何会影响 UI 展现的外部数据,都可以通过这个机制绑定到 React 的函数组件。在 React 中,这个机制就是 Hooks。所以我们现在也能够理解这个机制为什么叫 Hooks 了。顾名思义,Hook 就是“钩子”的意思。在 React 中,Hooks 就是把某个目标结果钩到某个可能会变化的数据源或者事件源上,那么当被钩到的数据或事件发生变化时,产生这个目标结果的代码会重新执行,产生更新后的结果。

useState:让函数组件具有维持状态的能力

React 的核心机制是能够在数据发生变化的时候自动重新渲染 UI,那么势必要有一个让我们保存状态的地方,这个保存状态的机制就是 state。

在函数组件中,我们可以使用 useState 这样一个 Hook 来保存状态,那么状态在发生变化时,也会让 UI 自动发生变化。比如下面这段代码,展示了一个简单计数器的实现的例子

import React from "react";export default function Counter() {const [count, setCount] = React.useState(0);return (<div><button onClick={() => setCount(count + 1)}>{count}</button></div>);
}

state 是 React 组件非常重要的一个机制,那么什么样的值应该保存在 state 中呢?这是日常开发中需要经常思考的问题。通常来说,我们要遵循的一个原则就是:state 中永远不要保存可以通过计算得到的值。比如说:

  1. 从 props 传递过来的值。有时候 props 传递过来的值无法直接使用,而是要通过一定的计算后再在 UI 上展示,比如说排序。那么我们要做的就是每次用的时候,都重新排序一下,或者利用某些 cache 机制,而不是将结果直接放到 state 里。
  2. 从 URL 中读到的值。比如有时需要读取 URL 中的参数,把它作为组件的一部分状态。那么我们可以在每次需要用的时候从 URL 中读取,而不是读出来直接放到 state 里。
  3. 从 cookie、localStorage 中读取的值。通常来说,也是每次要用的时候直接去读取,而不是读出来后放到 state 里。

不过,state 虽然便于维护状态,但也有自己的弊端。一旦组件有自己状态,意味着组件如果重新创建,就需要有恢复状态的过程,这通常会让组件变得更复杂。

useEffect:执行副作用

什么是副作用呢?通常来说,副作用是指一段和当前执行结果无关的代码。比如说要修改函数外部的某个变量,要发起一个请求,等等。也就是说,在函数组件的当次执行过程中,useEffect 中代码的执行是不影响渲染出来的 UI 的。

useEffect(callback, dependencies)

你只要记住,useEffect 是每次组件 render 完后判断依赖并执行就可以了。

总结一下,useEffect 让我们能够在下面四种时机去执行一个回调函数产生副作用:

  1. 每次 render 后执行:不提供第二个依赖项参数。比如useEffect(() => {})。
  2. 仅第一次 render 后执行:提供一个空数组作为依赖项。比如useEffect(() => {}, [])。
  3. 第一次以及依赖项发生变化后执行:提供依赖项数组。比如useEffect(() => {}, [deps])。
  4. 组件 unmount 后执行:返回一个回调函数。比如useEffect() => { return () => {} }, [])。

理解 Hooks 的依赖

在 useEffect Hook 中你已经看到了依赖项的概念。其实除了在 useEffect 中会用到外,在第 5 讲的 useCallback 和 useMemo 中也会用到。所以接下来我们就先透彻了解它的工作机制,帮助你在实际开发中能够正确地使用。

Hooks 提供了让你监听某个数据变化的能力。这个变化可能会触发组件的刷新,也可能是去创建一个副作用,又或者是刷新一个缓存。那么定义要监听哪些数据变化的机制,其实就是指定 Hooks 的依赖项。

不过需要注意的是,依赖项并不是内置 Hooks 的一个特殊机制,而可以认为是一种设计模式。有类似需求的 Hooks 都可以用这种模式去实现。

那么在定义依赖项时,我们需要注意以下三点:

  1. 依赖项中定义的变量一定是会在回调函数中用到的,否则声明依赖项其实是没有意义的。
  2. 依赖项一般是一个常量数组,而不是一个变量。因为一般在创建 callback 的时候,你其实非常清楚其中要用到哪些依赖项了。
  3. React 会使用浅比较来对比依赖项是否发生了变化,所以要特别注意数组或者对象类型。如果你是每次创建一个新对象,即使和之前的值是等价的,也会被认为是依赖项发生了变化。这是一个刚开始使用 Hooks 时很容易导致 Bug 的地方。例如下面的代码:
function Sample() {// 这里在每次组件执行时创建了一个新数组const todos = [{ text: 'Learn hooks.'}];useEffect(() => {console.log('Todos changed.');}, [todos]);
}

代码的原意可能是在 todos 变化的时候去产生一些副作用,但是这里的 todos 变量是在函数内创建的,实际上每次都产生了一个新数组。所以在作为依赖项的时候进行引用的比较,实际上被认为是发生了变化的。

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

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

相关文章

转-600条最强linux命令

一、基本命令 uname -m 显示机器的处理器架构 uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 (SMBIOS / DMI) hdparm -i /dev/hda 罗列一个磁盘的架构特性 hdparm -tT /dev/sda 在磁盘上执行测试性读取操作系统信息 arch 显示机器的处理器架构 uname -…

关于告警,要想做好,从这些方面着手

各类监控系统都会产生告警事件&#xff0c;于是&#xff0c;就产生了 FlashDuty、PagerDuty、Opsgenie 这类产品&#xff0c;做告警事件的收敛降噪、排班认领升级等。如果你想增强自己公司的告警事件处理能力&#xff0c;参考&#xff08;chao xi&#xff09;这些产品的功能就可…

使用统计方法在AMD GPU上使用JAX Profiler可靠地比较大型生成AI模型中的算法性能

Using statistical methods to reliably compare algorithm performance in large generative AI models with JAX Profiler on AMD GPUs — ROCm Blogs 摘要 本文提供了一份详细的指南&#xff0c;介绍如何在JAX实现的生成AI模型中测量和比较各种算法的性能。利用JAX Profiler…

35岁程序员的4条出路!请提早布局!

小编准备入门了Python入门学习籽料80个Python爬虫实战入门实例 点击 领取&#xff08;无偿获得&#xff09; 20多岁&#xff0c;初入职场&#xff0c;满腔热血&#xff0c;对未来充满憧憬&#xff1b; 30多岁&#xff0c;家庭事业双重压力&#xff0c;开始迷茫&#xff0c;对…

阿里云发送短信功能(Java)

&#xff08;1&#xff09;注册用户&#xff0c;并且开通短信套餐 &#xff08;2&#xff09; 点击快速学习&#xff0c;然后绑定测试的手机号码。 选用专用测试签名&#xff08;自定义的话阿里可能会验证什么什么的比较麻烦&#xff09; 然后在选取调用API &#xff08;3&…

10、Flink 动态表之表到流的转换详解

表到流的转换 动态表可以像普通数据库表一样通过 INSERT、UPDATE 和 DELETE 来不断修改,它可能是一个只有一行、不断更新的表,也可能是一个 insert-only 的表,没有 UPDATE 和 DELETE 修改,或者介于两者之间的其他表。 在将动态表转换为流或将其写入外部系统时,需要对这些…

3秒AI写真出图,Stable Diffusion2024升级版+使用教程来了!(无需安装,解压即用)

要说今年摄影圈最大的新秀 那妥妥的就Stable Diffusion 比如下面的写真照片 你敢信这是SD绘画生成的&#xff1f; 就在刚刚它又全面升级了 新版无需安装&#xff0c;直接解压就能用 比之前推送的更加智能、快速和简单 另外还特意为大家准备了 Stable Diffusion 人工智能…

故障诊断 | 基于小波时频图与Swin Transformer的轴承故障诊断方法(PyTorch)

文章目录 文章概述程序设计参考资料文章概述 基于小波时频图与Swin Transformer的轴承故障诊断方法 针对用传统的故障诊断方法难以对非线性非平稳的柴油机故障信号进行准确高效诊断的问题, 提出基于小波时频图与Swin Transformer的故障诊断方法。该方法可以有效结合小波时频分…

Git实战精粹

一、快速入门 1. 什么是Git Git是一个分布式的版本控制软件。 软件&#xff0c;类似于QQ、office、dota等安装到电脑上才能使用的工具版本控制&#xff0c;类似于毕业论文、写文案、视频剪辑等&#xff0c;需要反复修改和保留原历史数据分布式 文件夹拷贝本地版本控制集中式…

03-Python的运行方式

《Python 教程》总结 持续更新中&#xff0c;学习交流请加作者微信: python-baby 脚本和模块 脚本&#xff08;Scripts&#xff09; 在计算机术语中&#xff0c;脚本是指一个包含逻辑顺序的文本文件&#xff0c;我们可以运行脚本来完成特定任务。这些逻辑顺序通常用脚本语言…

如何在Java中使用protobuf

写在前面 本文看下在Java中如何使用protofbuf。 1&#xff1a;介绍 1.1&#xff1a;什么是protobuf 是一种数据格式&#xff0c;同json&#xff0c;xml&#xff0c;等。但是一种二进制数据格式。 1.2&#xff1a;强在哪里&#xff1f;为啥要用&#xff1f; 小&#xff0c…

org.apache.commons.lang.math.NumberUtils#isNumber 解释

源码 /*** <p>Checks whether the String a valid Java number.</p>** <p>Valid numbers include hexadecimal marked with the <code>0x</code>* qualifier, scientific notation and numbers marked with a type* qualifier (e.g. 123L).</…

JS中this的指向问题、JS的执行机制、offset、client、scroll

JS中this的指向问题 1. 在全局环境下 在全局环境中&#xff08;在浏览器中是 window 对象&#xff0c;在Node.js中是 global 对象&#xff09;&#xff0c;this 指向全局对象。 console.log(this window); // 在浏览器中为 true console.log(this.document ! undefined); //…

如何练高音技巧

如何练高音技巧 高音的练习技巧有&#xff1a;练“a”(啊)音&#xff0c;让口腔打开&#xff0c;声带放松&#xff0c;反复几次&#xff1b;再练“u”(呜)音&#xff0c;这个音可以有按摩声带的功能&#xff0c;也使声带进一步放松&#xff1b;发“i”(衣)音&#xff0c;逐步加…

缓存失效问题-雪崩/击穿/穿透

1. 缓存雪崩 1.1. 定义 大量缓存同一时间失效&#xff0c;大量访问数据库。 1.2. 发生条件 大量key相同过期时间缓存服务器重启 1.3. 解决方案 设置随机的缓存过期时间缓存预热高可用缓存集群降级限流 2. 缓存击穿 2.1. 定义 一个热点数据在缓存里失效&#xff0c;很多…

k8s 四种Service类型(ClusterIP、NodePort、LoadBalancer、ExternalName)详解

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《Kubernetes航线图&#xff1a;从船长到K8s掌舵者》 &#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、引言 1、k8s概述 2、Service在Kubernetes中的…

大模型本地化部署2-Docker部署MaxKB

大模型本地化部署2-Docker部署MaxKB 0、MaxKB简介1、安装docker2、在docker中拉取MaxKB镜像3、运行镜像4、访问MaxKB5、创建应用6、使用应用进行对话 0、MaxKB简介 MaxKB是一款基于LLM大预言模型的知识库问答系统。具有以下特点&#xff1a; 多模型支持&#xff1a;支持对接主…

开放式耳机怎么戴?佩戴舒适在线的几款开放式耳机分享

开放式耳机的佩戴方式与传统的入耳式耳机有所不同&#xff0c;它采用了一种挂耳式的设计&#xff0c;提供了一种新颖的佩戴体验&#xff0c;以下是开放式耳机的佩戴方式。 1. 开箱及外观&#xff1a;首先&#xff0c;从包装盒中取出耳机及其配件&#xff0c;包括耳机本体、充电…

什么是密码学?

什么是密码学&#xff1f; 密码学是一种通过使用编码算法、哈希和签名来保护信息的实践。此信息可以处于静态&#xff08;例如硬盘驱动器上的文件&#xff09;、传输中&#xff08;例如两方或多方之间交换的电子通信&#xff09;或使用中&#xff08;在对数据进行计算时&#…

软件造价之如何确定定开和成品软件的边界?

在软件项目中&#xff0c;我们常常面临选择&#xff1a;是直接购买并使用成品软件&#xff0c;还是根据特定需求定制开发&#xff1f;这一决策不仅关乎项目成本也关乎到我们成本测算方法的选择。因此&#xff0c;明确定开与成品软件的边界&#xff0c;是软件造价的首要任务。 …