React函数组件使用Effect Hook(副作用钩子)

使用Effect Hook(副作用钩子)

如果你熟悉 React class 的生命周期函数,你可以把 useEffect Hook 看做 componentDidMount(挂载完成),componentDidUpdate(更新完成) 和 componentWillUnmount(即将销毁前) 这三个函数的组合。

Did : 做了… Will: 将要…

数据获取,设置订阅以及手动更改 React 组件中的 DOM 都属于副作用。不管你知不知道这些操作,或是“副作用”这个名字,应该都在组件中使用过它们。

在 React 组件中有两种常见副作用操作:**需要清除的 **和 不需要清除的。我们来更仔细地看一下他们之间的区别。

无需清除的 effect

有时候,我们只想**在 React 更新 DOM 之后运行一些额外的代码。**比如发送网络请求,手动变更 DOM,记录日志,这些都是常见的无需清除的操作。因为我们在执行完这些操作之后,就可以忽略他们了。让我们对比一下使用 class 和 Hook 都是怎么实现这些副作用的。

使用 class 的示例

在 React 的 class 组件中,render 函数是不应该有任何副作用的。一般来说,在这里执行操作太早了,我们基本上都希望在 React 更新 DOM 之后才执行我们的操作。

这就是为什么在 React class 中,我们把副作用操作放到 componentDidMountcomponentDidUpdate 函数中。回到示例中,这是一个 React 计数器的 class 组件。它在 React 对 DOM 进行操作之后,立即更新了 document 的 title 属性

class Example extends React.Component {constructor(props) {super(props);this.state = {count: 0};}// DOM挂载了componentDidMount() {document.title = `You clicked ${this.state.count} times`;}// DOM更新了componentDidUpdate() {document.title = `You clicked ${this.state.count} times`;}render() {return (<div><p>You clicked {this.state.count} times</p><button onClick={() => this.setState({ count: this.state.count + 1 })}>Click me</button></div>);}
}

注意,在这个 class 中,我们需要在两个生命周期函数中编写重复的代码。

这是因为很多情况下,我们希望在组件加载和更新时执行同样的操作。从概念上说,我们希望它在每次渲染之后执行 —— 但 React 的 class 组件没有提供这样的方法。即使我们提取出一个方法,我们还是要在两个地方调用它。

现在让我们来看看如何使用 useEffect 执行相同的操作。

使用 Hook 的示例

import React, { useState, useEffect } from 'react';
function Example() {const [count, setCount] = useState(0);useEffect(() => { // 每次渲染组件DOM后执行此回调函数(即,挂载完成和更新完成生命周期)document.title = `You clicked ${count} times`;});return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}

useEffect 做了什么? 通过使用这个 Hook,你可以告诉 React 组件需要在渲染后执行某些操作。React 会保存你传递的函数(我们将它称之为 “effect”),并且在执行 DOM 更新之后调用它。在这个 effect 中,我们设置了 document 的 title 属性,不过我们也可以执行数据获取或调用其他命令式的 API。

为什么在组件内部调用 useEffectuseEffect 放在组件内部让我们可以在 effect 中直接访问 count state 变量(或其他 props)。我们不需要特殊的 API 来读取它 —— 它已经保存在函数作用域中。Hook 使用了 JavaScript 的闭包机制,而不用在 JavaScript 已经提供了解决方案的情况下,还引入特定的 React API。

useEffect 会在每次渲染后都执行吗? 是的,默认情况下,它在第一次渲染之后每次更新之后都会执行。(我们稍后会谈到如何控制它。)你可能会更容易接受 effect 发生在“渲染之后”这种概念,不用再去考虑“挂载”还是“更新”。React 保证了每次运行 effect 的同时,DOM 都已经更新完毕。

不同之处

componentDidMountcomponentDidUpdate 不同,使用 useEffect 调度的 effect 不会阻塞浏览器更新屏幕,这让你的应用看起来响应更快。大多数情况下,effect 不需要同步地执行。在个别情况下(例如测量布局),有单独的 useLayoutEffect Hook 供你使用,其 API 与 useEffect 相同。

需要清除的 effect

之前,我们研究了如何使用不需要清除的副作用,还有一些副作用是需要清除的。例如订阅外部数据源。这种情况下,清除工作是非常重要的,可以防止引起内存泄露!现在让我们来比较一下如何用 Class 和 Hook 来实现。

使用 Class 的示例

class FriendStatus extends React.Component {constructor(props) {super(props);this.state = { isOnline: null };this.handleStatusChange = this.handleStatusChange.bind(this);}// 挂载后componentDidMount() {ChatAPI.subscribeToFriendStatus(this.props.friend.id,this.handleStatusChange);}// 即将卸载componentWillUnmount() {ChatAPI.unsubscribeFromFriendStatus(this.props.friend.id,this.handleStatusChange);}handleStatusChange(status) {this.setState({isOnline: status.isOnline});}render() {if (this.state.isOnline === null) {return 'Loading...';}return this.state.isOnline ? 'Online' : 'Offline';}
}

使用 Hook 的示例

import React, { useState, useEffect } from 'react';function FriendStatus(props) {const [isOnline, setIsOnline] = useState(null);useEffect(() => { // 每次渲染组件DOM后执行此回调函数(即,挂载完成和更新完成生命周期)function handleStatusChange(status) {setIsOnline(status.isOnline);}ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);// 每次重新渲染前都会执行(class的 componentWillUnmount 只在卸载组件执行)return function cleanup() { // 函数名非必需,可使用箭头函数ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);};});if (isOnline === null) {return 'Loading...';}return isOnline ? 'Online' : 'Offline';
}

使用 Effect 的提示

使用Hook的目的

使用 Hook 其中一个目的就是要解决 class 中生命周期函数经常包含不相关的逻辑,但又把相关逻辑分离到了几个不同方法中的问题。

提示: 使用多个 Effect 实现关注点分离

可以使用多个 effect。这会将不相关逻辑分离到不同的 effect 中:

function FriendStatusWithCounter(props) {const [count, setCount] = useState(0);useEffect(() => {document.title = `You clicked ${count} times`;});const [isOnline, setIsOnline] = useState(null);useEffect(() => {function handleStatusChange(status) {setIsOnline(status.isOnline);}ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);return () => {ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);};});// ...
}

解释: 为什么每次更新的时候都要运行 Effect

如果你已经习惯了使用 class,那么你或许会疑惑为什么 effect 的清除阶段在每次重新渲染时都会执行,而不是只在卸载组件的时候执行一次。让我们看一个实际的例子,看看为什么这个设计可以帮助我们创建 bug 更少的组件。

忘记正确地处理 componentDidUpdate 是 React 应用中常见的 bug 来源

提示: 通过跳过 Effect 进行性能优化

在某些情况下,每次渲染后都执行清理或者执行 effect 可能会导致性能问题。

如果某些特定值在两次重渲染之间没有发生变化,你可以通知 React 跳过对 effect 的调用,只要传递数组作为 useEffect 的第二个可选参数即可:

useEffect(() => {document.title = `You clicked ${count} times`;
}, [count]); // 仅在 count 更改时更新

对于有清除操作的 effect 同样适用:

useEffect(() => {function handleStatusChange(status) {setIsOnline(status.isOnline);}ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);return () => {ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);};
}, [props.friend.id]); // 仅在 props.friend.id 发生变化时,重新订阅

未来版本,可能会在构建时自动添加第二个参数。

注意:

  1. 如果你要使用此优化方式,请确保数组中包含了所有外部作用域中会随时间变化并且在 effect 中使用的变量,否则你的代码会引用到先前渲染中的旧变量。

  2. 如果想执行只运行一次的 effect(仅在组件挂载和卸载时执行),可以传递一个空数组([])作为第二个参数。

  3. 如果你传入了一个空数组([]),effect 内部的 props 和 state 就会一直拥有其初始值。尽管传入 [] 作为第二个参数更接近大家更熟悉的 componentDidMountcomponentWillUnmount 思维模式,但我们有更好的方式来避免过于频繁的重复调用 effect。除此之外,请记得 React 会等待浏览器完成画面渲染之后才会延迟调用 useEffect,因此会使得额外操作很方便。

  4. 我们推荐启用 eslint-plugin-react-hooks 中的 exhaustive-deps 规则。此规则会在添加错误依赖时发出警告并给出修复建议。

参考文献:Effect Hook

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

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

相关文章

云原生数据库性能对比(阿里云、百度智能云、腾讯云)

本文作者 LYZ 近些年&#xff0c;云原生数据库成为云厂商的重要发展方向&#xff0c;阿里云、百度智能云、腾讯云均先后发布了自研的云原生数据库。笔者认为云原生数据库具有更高的性价比、更极致的弹性&#xff0c;可以满足业务发展的不同阶段和负载场景的需求&#xff0c;也是…

FPGA高端项目:SDI 视频+音频编解码,提供工程源码和技术支持

目录 1、前言免责声明 2、相关方案推荐我这里已有的 GT 高速接口解决方案我目前已有的SDI编解码方案 3、设计思路和框架设计框图GV8601A均衡EQGTX 时钟要求GTX 调用与控制SMPTE SD/HD/3G-SDISMPTE SD/HD/3G-SDI 接收SMPTE SD/HD/3G-SDI 发送 SDI 视频接收数据处理SDI 音频接收-…

A Prompt Learning Framework for Source Code Summarization

Q: 这篇论文试图解决什么问题&#xff1f; A: 这篇论文试图解决的问题是自动生成代码片段的自然语言摘要&#xff08;也称为注释&#xff09;&#xff0c;这对于帮助开发人员理解和维护源代码至关重要。最近&#xff0c;随着大型语言模型&#xff08;LLMs&#xff09;在许多领…

开源minio-AWS-S3存储的部署及go操作详细

介绍 MinIO是一个开源的分布式对象存储服务&#xff0c;它允许用户在私有云或公有云环境中构建自己的对象存储基础设施。MinIO旨在提供高性能、高可用性的对象存储&#xff0c;并且与Amazon S3兼容&#xff0c;这意味着可以使用S3客户端工具和库直接与MinIO交互&#xff0c;而…

pycharm 工具栏不见了

新版pycharm后&#xff0c; 菜单栏和工具栏不见了 目录 我发现的解决方法&#xff1a; 其他旧版的解决方法&#xff1a; 我发现的解决方法&#xff1a; 其他旧版的解决方法&#xff1a; 另外&#xff0c;一些使用pycharm的新手可能会由于不熟悉软件的功能而误操作&#xff…

SystemVerilog:always_ff,always_comb,always_latch

文章目录 一、简介二、示例 一、简介 Verilog中只有一个通用的always过程块&#xff0c;SystemVerilog中追加了3个具有更明确目的专用always块。 always_ffalways_combalways_latch always_ff, always_comb, always_latch分别是用于寄存器&#xff08;flip-flop&#xff0c;…

【头歌实训】PySpark Streaming 数据源

文章目录 第1关&#xff1a;MySQL 数据源任务描述相关知识PySpark JDBC 概述PySpark JDBCPySpark Streaming JDBC 编程要求测试说明答案代码 第2关&#xff1a;Kafka 数据源任务描述相关知识Kafka 概述Kafka 使用基础PySpark Streaming Kafka 编程要求测试说明答案代码 第1关&a…

scikit-learn文档中的数据生成器

目录 1. make_classification: 2. make_regression: 3. make_blobs: 4. make_moons: 5.make_circles 6. make_sparse_coded_signal: 1. make_classification: 这是一个用于生成复杂二维数据的函数&#xff0c;通常用于可视化分类器的学习过程或者测试机器学习算法的性能…

Kali Linux如何启动SSH并在Windows系统远程连接

文章目录 1. 启动kali ssh 服务2. kali 安装cpolar 内网穿透3. 配置kali ssh公网地址4. 远程连接5. 固定连接SSH公网地址6. SSH固定地址连接测试 简单几步通过[cpolar 内网穿透](cpolar官网-安全的内网穿透工具 | 无需公网ip | 远程访问 | 搭建网站)软件实现ssh 远程连接kali! …

本地网络禁用了在哪里开启?

在当今数字化时代&#xff0c;网络已经成为人们生活中不可或缺的一部分。然而&#xff0c;有时我们可能需要禁用本地网络&#xff0c;无论是出于安全考虑、提高专注力还是其他原因。本文将探讨禁用本地网络的方法以及如何在需要时重新开启网络连接。 第一部分&#xff1a;禁用…

工具系列:TimeGPT_(9)模型交叉验证

交叉验证 文章目录 交叉验证外生变量比较不同的模型 时间序列预测中的主要挑战之一是随着时间的推移固有的不确定性和变异性&#xff0c;因此验证所采用的模型的准确性和可靠性至关重要。交叉验证是一种强大的模型验证技术&#xff0c;特别适用于此任务&#xff0c;因为它提供了…

抗原设计与兔单B细胞技术的结合-卡梅德生物

随着生物医学研究的不断深入&#xff0c;抗体疗法作为治疗疾病的有力工具逐渐成为研究的焦点。而兔单B细胞技术作为抗体研究的创新方法&#xff0c;其与抗原设计的有机结合为获取定制抗体打开了崭新的创新之路。本文将深入探讨抗原设计与兔单B细胞技术相互融合的原理、优势&…

使用 GitHub 进行团队协作的操作指南

目录 前言1 使用github进行团队开发的意义2 邀请成员加入团队3 克隆和提交代码3.1 克隆远程仓库到本地3.2 加入暂存区3.3 提交修改到本地仓库3.4 设置本地仓库和远程仓库的关联3.5 将本地仓库的代码推送到远程仓库 结语 前言 GitHub 是一个广泛使用的基于 Git 的代码托管平台&…

Java - 获取 Jar 包内的 pom.xml 文件

目录 一.引言 二.通过 jar 命令 ◆ 查看 Jar 包内文件 ◆ 导出 Pom.xml ◆ 导出 Jar 包内文件 三.通过 unzip 命令 ◆ 导出 Jar 包内文件 四.总结 一.引言 引用其他同学的 Jar 包时&#xff0c;需要获取其对应 jar 包内的 pom.xml 文件检查版本依赖关系&#xff0c;下…

MYSQL存储过程和存储函数-数据库实验五

Mysql数据库实验及练习题相关 MySQL 数据库和表的管理-数据库实验一 MySQL连接查询、索引、视图-数据库实验二、实验三 MySQL约束、触发器-数据库实验四 MYSQL存储过程和存储函数-数据库实验五 MySQL批量随机生成name、TEL、idNumber MYSQL数据库的安全管理-数据库实验六 MYSQ…

基于JetCache整合实现一级、二级缓存方案(方案实现)

目录 一、整体方案说明 1.1 需求说明 1.2 整体方案实现组件结构图 二、Caffeine缓存实现 2.1 组件说明 2.2 组件结构图 2.3 组件Maven依赖 2.4 组件功能实现源码 2.4.1 CaffeineCacheManager扩展实现 2.4.2 CaffeineConfiguration配置类实现 2.4.3 涉及其他组件的类 …

如何在Android Termux中使用SFTP实现远程传输文件

文章目录 1. 安装openSSH2. 安装cpolar3. 远程SFTP连接配置4. 远程SFTP访问5. 配置固定远程连接地址6、结语 SFTP&#xff08;SSH File Transfer Protocol&#xff09;是一种基于SSH&#xff08;Secure Shell&#xff09;安全协议的文件传输协议。与FTP协议相比&#xff0c;SFT…

Spring Boot 中的虚拟线程

在本文中&#xff0c;我将讨论 Spring Boot 中的虚拟线程。 什么是虚拟线程&#xff1f; 虚拟线程作为 Java 中的一项功能引入&#xff0c;旨在简化并发性。 Virtual threads 是 轻量级的线程&#xff0c;由 Java Virtual Machine 而不是操作系统管理。它们被设计为易于使用且…

npm run dev 生成network网址无法被同局域网下的其他主机访问

当使用 npm run dev 运行开发服务器时&#xff0c;通常该服务器只会监听本地主机&#xff08;localhost&#xff09;&#xff0c;这意味着只有在运行服务器的计算机上可以访问。如果你希望其他主机也能够访问该开发服务器&#xff0c;你可能需要配置服务器以监听所有可用的网络…

知识付费小程序如何搭建?

随着互联网的发展和人们对知识的渴求&#xff0c;知识付费行业正逐渐崭露头角。而其中&#xff0c;知识付费小程序因其便捷性、个性化等特点&#xff0c;成为了越来越多人的首选。那么&#xff0c;如何搭建一个知识付费小程序呢&#xff1f;本文将为你揭秘从零到一的全过程&…