React(五)UseEffect、UseRef

(一)useEffect

useEffect – React 中文文档 

useEffect hook用于模拟以前的class组件的生命周期,但比原本的生命周期有着更强大的功能

1.类组件的生命周期

在类组件编程时,网络请求,订阅等操作都是在生命周期中完成

import React, { Component } from 'react'export default class App extends Component {// 组件挂载后执行componentDidMount(){// 发送请求// 事件总线绑定// 创建定时器等}// 组件更新后执行componentDidUpdate(){}// 组件销毁前执行componentWillUnmount(){// 事件总线解绑// 清除定时器}render() {return (<div>App</div>

2.函数式组件的生命周期

函数式组件没有明确的生命周期,使用useEffect来模拟生命周期

useEffect(setup, dependencies?)

在useRffect的第一个参数传入回调函数,执行请求、挂载等操作

useEffect会在组件每次挂载、更新后调用回调 

import { useState, useEffect } from 'react'
function App() {const [count, setCount] = useState(0)useEffect(()=>{// 发送请求// store仓库订阅subscribe// 事件总线绑定 eventbus.on// 操作外部domdocument.title = count})return (<><div>{count}</div><button onClick={()=>{setCount(count+1)}}>加1</button></>)
}

如何在组件销毁前取消订阅或者移除绑定?

只需要在第一个回调里返回一个回调函数即可,useEffect会在组件销毁前/组件更新前调用

useEffect(()=>{// 发送请求// store仓库订阅subscribe// 事件总线绑定 eventbus.on// 操作外部domdocument.title = count// 计数器const time = setInterval(()=>{console.log(1);},1000)return ()=>{// store仓库取消订阅 unsubscribe// 清除事件总线// 清除计数器等操作clearInterval(time)}})

回调函数内的代码太长了

拆分useEffect,每个功能都可以单独写一个useEffect,react会自动处理

  useEffect(()=>{// 发送请求})useEffect(()=>{// store仓库订阅subscribereturn ()=>{// store仓库取消订阅 unsubscribe}})useEffect(()=>{// 计数器const time = setInterval(()=>{console.log(count);},1000)return ()=>{// 清除计数器等操作clearInterval(time)}})

执行次数会不会太多了?

向上面那样书写的话,每次update都会执行回调,更新一次dom就请求一次、绑定一次事件这样子也太蠢了,因此useEffect可以传入第二个参数,用来控制依据什么来决定是否执行,和之前useCallback、useMemo一样,都会传入dependencies这个参数

  // 只执行一次useEffect(()=>{// 发送请求},[])// 只执行一次useEffect(()=>{// store仓库订阅subscribereturn ()=>{// store仓库取消订阅 unsubscribe}},[])// count改变才执行useEffect(()=>{document.title = count},[count])

useEffect先简单写到这里,useEffect虽然是模拟生命周期,但它能做的事比生命周期更多,能够根据传入的数组参数判断是否执行 

(二)useRef

useRef – React 中文文档 

useRef 是一个 React Hook,它能帮助引用一个不需要渲染的值

useRef(initialValue)

initialValue:ref 对象的 current 属性的初始值。可以是任意类型的值。这个参数在首次渲染后被忽略 

useRef hook主要有两个功能:

  • 绑定dom元素
  • 保存一个数据,在整个生命周期中可以保存不变 

1.绑定dom元素

初始化const xxx = useRef();通过ref={xxx}来绑定ref

import { useState, useRef } from 'react'
function App() {const [count, setCount] = useState(0)const nameRef = useRef()console.log(nameRef.current);return (<><div ref={nameRef}>csq</div><div>{count}</div><button onClick={()=>{setCount(count+1)}}>加1</button></>)
}

通过xxx.current获取该dom元素

 

2.绑定一个值(解决闭包陷阱)

先说说闭包陷阱

闭包陷阱是指使用react hooks的时候,由于闭包特性,在某些函数内获取useState或者props的值时获取到的是旧的值,而实际值已经改变

使用 ref 可以确保:

  • 可以在重新渲染之间 存储信息(普通对象存储的值每次渲染都会重置)。
  • 改变它 不会触发重新渲染(状态变量会触发重新渲染)。
  • 对于组件的每个副本而言,这些信息都是本地的(外部变量则是共享的)。

改变 ref 不会触发重新渲染,所以 ref 不适合用于存储期望显示在屏幕上的信息。如有需要,使用 state 代替。

将新增count的操作放到useCallback回调里,会导致读取到的count始终为0

const [count, setCount] = useState(0)const increment = useCallback(()=>{setCount(count+1) // set(0+1)console.log(count); // 0},[])return (<><div>{count}</div><button onClick={()=>increment()}>加1</button></>)

因为useCallback传入的依赖为空,意味着increment函数只生成一次,只能读取到生成时count的状态,即0(我感觉我也是蒙的)

这样就形成了闭包陷阱

解决办法:

(1)添加useCallback的依赖即可

const increment = useCallback(()=>{setCount(count+1) console.log(count)},[count])

(2)使用useRef

const [count, setCount] = useState(0)const countRef = useRef()// count改变会引起重新渲染,这样countRef的值每次都和count相等countRef.current = countconst increment = useCallback(()=>{setCount(countRef.current+1) },[])return (<><div>{count}</div><button onClick={()=>increment()}>加1</button></>)

这里肯定不是应用useRef的最好场景,毕竟加个依赖项就解决了

但使用useRef的话,increment函数就不会重新加载了!

(三)总结

只能说是对useEffect相见恨晚,这个钩子好牛b

今天写的较为简略QAQ

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

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

相关文章

图书推荐:ChatGPT专业知识信息课程

《ChatGPT专业知识信息课程》&#xff08;ChatGPT-Expertise Informative Course&#xff09; 是一本由Dwayne Anderson撰写的电子书&#xff0c;提供了关于ChatGPT的丰富知识。该书涵盖了与ChatGPT相关的各种主题&#xff0c;如其与OpenAI的关系、ChatGPT与GPT-3之间的混淆、C…

【蓝牙概述】

蓝牙无线技术是一种短距离通信系统&#xff0c;旨在取代连接便携式和/或固定电子设备的电缆。蓝牙无线技术的主要特点是稳健性、低功耗和低成本。该规范的许多功能都是可选的&#xff0c;从而允许产品差异化。 蓝牙无线技术系统有两种形式&#xff1a;基本速率 (BR) 和低功耗 …

浅谈旧项目如何添加新依赖

Spring项目创建之后&#xff0c;还想添加新的依赖&#xff08;如Spring框架内置的依赖&#xff09;&#xff0c;可以安装插件&#xff1a; 装完该插件之后&#xff0c;就可以在pom.xml文件里&#xff0c;右键选择 Generate即可出现下述界面&#xff1a; 点击ok即可添加新的…

jpeg压缩算法学习(1)——离散余弦变换

离散余弦变换是jpeg压缩算法的关键步骤 思想 离散余弦变换的基本原理是&#xff1a;每一组离散的数据都可以由一组不同频率的余弦波来表示。 应用于图片上就是&#xff1a;将像素值转换为不同频率的余弦函数的系数&#xff08;权重&#xff09; 像素值——>权重 一维离…

网络原理——TCP/IP--数据链路层,DNS

T04BF &#x1f44b;专栏: 算法|JAVA|MySQL|C语言 &#x1faf5; 今天你敲代码了吗 目录 数量链路层目的地址和原地址类型校验和 DNS 数量链路层 主要的协议是以太网协议.一个横跨数据链路层和 物理层的协议,既包含了数据链路层的内容, 也包含了⼀些物理层的内容 我们来了解一…

【前端开发--css学习笔记】CSS超详细的学习笔记。前端开发css学习笔记(非常详细,适合小白入门)

二&#xff0c;CSS学习笔记 1&#xff0c;CSS语法 1-1 CSS 实例 CSS声明总是以分号 ; 结束&#xff0c;声明总以大括号 {} 括起来: <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>菜鸟教程(runoob.com)</title…

为什么改变进制传输系统码长不变

目录 直接上图片 问题分析 传信率与传码率 多进制调制 码长不变的理解 误码率考量 总结 直接上图片 问题分析 在讨论这个问题时&#xff0c;通常是指在保持RB&#xff08;码元传输速率&#xff0c;传码率&#xff0c;符号率&#xff0c;波特率&#xff09;不变的情况下&a…

即时通讯视频会议平台,WorkPlus本地化部署解决方案

随着现代科技的快速发展&#xff0c;传统的会议方式已经不再满足企业和组织的需求。即时通讯视频会议以其便利性和高效性&#xff0c;成为了现代企业沟通和协作的重要工具。通过即时通讯视频会议&#xff0c;企业可以实现无时差的交流和远程协作&#xff0c;增强团队合作和提高…

实现Redis和数据库数据同步问题(JAVA代码实现)

这里我用到了Redis当中的发布订阅模式实现(JAVA代码实现) 先看图示 下面为代码实现 首先将RedisMessageListenerContainer交给Spring管理. Configuration public class redisConfig {AutowiredRedisConnectionFactory redisConnectionFactory;AutowiredQualifier("car…

HALCON-从入门到入门-最常用的算子-二值化

1.废话 图像处理中的二值化是一种将灰度图像转换为只有两种可能值&#xff08;通常是0和255&#xff0c;分别代表黑色和白色&#xff09;的过程。这个过程在数字图像处理中非常常见&#xff0c;因为它可以简化图像数据&#xff0c;突出图像的主要特征&#xff0c;并降低后续处…

【Spring框架全系列】IOC DI案例,setter方法和构造方法注入(详解) + 思维导图

文章目录 一.概念实操Maven父子工程 二. IOC和DI入门案例【重点】1 IOC入门案例【重点】问题导入1.1 门案例思路分析1.2 实现步骤2.1 DI入门案例思路分析2.2 实现步骤2.3 实现代码2.4 图解演示 三、Bean的基础配置问题导入问题导入1 Bean是如何创建的【理解】2 实例化Bean的三种…

二分查找,查找第一个大于目标元素target所对应的下标-2300. 咒语和药水的成功对数

题目链接及描述 2300. 咒语和药水的成功对数 - 力扣&#xff08;LeetCode&#xff09; 题目分析 这道题目作为一个典型的二分查找&#xff0c;题目中所述&#xff0c;找到每一个spells[i]在positions中对应的元素positions[i]使其乘积大于给定元素sucess&#xff0c;并统计每一…

云队友:专业的远程工作和程序员接单平台,用户体验佳

编程赚钱的平台有不少&#xff0c;良莠不齐&#xff0c;今天给大家分享个专业的远程工作平台&#xff0c;以技术类工作为主&#xff08;包括编程&#xff09;&#xff1a; 云队友简介 外包大师是PMCAFF互联网产品社区于2016年推出的互联网产品技术外包服务平台。外包大师最新…

HCIP的学习(28)

第九章&#xff0c;链路聚合和VRRP 链路聚合 ​ 目的&#xff1a;备份链路以及提高链路带宽。 ​ 链路聚合技术&#xff08;Eth-Trunk&#xff09;&#xff1a;将多个物理接口捆绑成一个逻辑接口&#xff0c;将N条物理链路逻辑上聚合为一条逻辑链路。 正常情况下&#xff0c;…

成功解决“IndexError: queue index out of range”错误的全面指南

成功解决“IndexError: queue index out of range”错误的全面指南 引言 在Python编程中&#xff0c;queue模块提供了同步队列类&#xff0c;包括FIFO&#xff08;先进先出&#xff09;队列Queue&#xff0c;LIFO&#xff08;后进先出&#xff09;队列LifoQueue&#xff0c;以…

Redis——基本命令

概念&#xff1a; Redis(REmote Dlctionary Server) 是用 C语言开发的一个开源的高性能键值对(key-value) 数据库 特征&#xff1a; 1. 数据间没有必然的关联关系 2. 内部采用单线程机制进行工作 3. 高性能 4. 多数据类型支持 字符串类型 string 列表类型 …

期权高频交易能做吗?期权可以频繁交易吗?

今天带你了解期权高频交易能做吗&#xff1f;期权可以频繁交易吗&#xff1f;在期权交易市场&#xff0c;大部分人都知道不能频繁交易&#xff0c;就连不少投资新手都知道频繁交易是大忌&#xff0c;是错误的&#xff0c;是应该避免的。所以是不行的。 期权高频交易能做吗&…

阿里云搭建物联网平台+MQTT.fx接入阿里云

文章目录 本篇介绍一、阿里云物联网平台搭建二 、MQTT客户端接入阿里云物联网平台总结 本篇介绍 本篇搭建了阿里云物联网平台&#xff0c;使用MQTT.fx接入阿里云&#xff0c;上传温湿度数据 使用到的软件&#xff1a;阿里云、MQTT.fx 一、阿里云物联网平台搭建 首先创建一个物…

MinIO 使用

MinIO自建对象存储 1、dock-compose 使用dock-compose拉取 minio:image: "minio/minio"container_name: minioports:- "9000:9000"- "9001:9001"volumes:- "./minio/data1:/data1"- "./minio/data2:/data2"restart: on-fai…

Glow模型【图解版加代码】

论文&#xff1a;Glow: Generative Flow with Invertible 1x1 Convolutions 代码&#xff1a;pytorch版本&#xff1a;rosinality/glow-pytorch: PyTorch implementation of Glow (github.com) 正版是TensorFlow版本 openai的 参考csdn文章&#xff1a;Glow-pytorch复现gith…