React Hooks —— ref hooks

什么是Hooks

Hooks从语法上来说是一些函数。这些函数可以用于在函数组件中引入状态管理和生命周期方法。

React Hooks的优点

  1. 简洁
    从语法上来说,写的代码少了
  2. 上手非常简单
    • 基于函数式编程理念,只需要掌握一些JavaScript基础知识
    • 与生命周期相关的知识不用学,react Hooks使用全新的理念来管理组件的运作过程
    • 与HOC相关的知识不用学,React Hooks能够完美解决HOC想要解决的问题,并且更可靠
    • Mobx取代了Redux做状态管理
  3. 代码复用性更好
  4. 与Typescript结合更简单

React Hooks的缺点

  1. 状态不同步
    在异步操作的函数中访问的状态还是原来的状态的值
  2. useEffect依赖问题
    当useEffect依赖的数据变多后会导致频繁触发

React Hooks的注意事项

  1. 命名规范
    自定义Hooks的命名一律使用use作为前缀,形如:useXXX
  2. 仅在最外层调用React Hooks
  3. 仅从react函数中调用react Hooks
    在自定义Hooks或者组件中调用Hooks

ref hook

可以在函数式组件中存储/查找组件内的元素或其他数据

useRef

useRef(initialValue)返回一个可变的ref对象,该对象只有一个current属性,初始值为传入的参数initialValue,并且返回的ref对象在组件的整个生命周期内保持不变。

作用:

  • 用来获取DOM节点的实例,与React.createRef()作用一样
  • 存储渲染周期之间的共享数据
  1. 获取DOM节点的实例
import {useRef} from 'react'
function APP(){const userRef = useRef(null);const clickButton = ()=>{if(userRef.current){console.log(userRef.current);}}return <div><input name="username" ref={userRef} /><button onClick={clickButton}>show</button></div>
}
  1. 存储共享数据
    import {useRef,useState} from 'react'
    function APP(){const [count,setCount] = useState(0);const countRef = useRef(null);const preCount = countRef.current;useEffect(()=>{countRef.current = count;});const clickButton = ()=>{setCount(count+1);}return <div><input name="username" /><button onClick={clickButton}>show</button></div>
    }
    
注意事项
  1. 组件的每次渲染,useRef的返回值都不变
  2. ref.current发生变化并不会造成重新渲染
  3. 不可以在render中更新ref.current的值,否则会导致ref.current的值计算错误
    这是因为当其他的数据发生变化时,会导致重新渲染,这时ref.current会更新,这就导致计算错误。
  4. 元素属性的ref的值不能是useRef返回的对象以外的值
  5. ref.current的值发生变化不会触发useEffect
forwardRef

当ref作用在一个函数式组件上时不会获取到组件实例。因此需要使用forwardRef。

forwardRef会创建一个React组件,这个组件能够将其接收的ref属性转发到自己的组件树。

forwardRef()的用法是包裹一个组件。

import {forwardRef,useRef,useEffect} from 'react'
const Child = forwardRef((props,ref)=>{return <input ref={ref} type="text" />
});
function App(){const childRef = useRef(null);useEffect(()=>{childRef.current.focus();});return <><Child ref={childRef}></Child></>
}
useImperativeHandle

useImperativeHandle允许组件自定义需要暴露的ref数据,是为了解决useRef获取到组件的所有属性和方法的问题。

useImperativeHandle(ref,handle,[deps]):

  • ref:需要暴露的ref引用
  • handle:是一个函数,返回值会作为ref.current的值
  • deps:依赖数据,需要监听的状态
import {useRef,useImperativeHandle,forwardRef} from 'react'
const Child = forwardRef((props,ref){useImperativeHandle(ref,()=>{return {focus:()=>ref.current.focus()}},[props.value]);retunr <input ref={ref} value={props.value} />
});
function App(){const childRef = useRef(null);return <><Child ref={childRef}></Child></>
}
注意事项
  • useImperativeHandle和React.forwardRef必须配合使用,否则在运行的时候会直接报错。
  • 使用useImperativeHandle后,可以让父、子组件分别有自己的ref,通过React.forwardRef将父组件的ref传递过来,通过useImperativeHandle方法来自定义开放给父组件的current。

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

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

相关文章

python:openpyxl 读取 Excel文件,显示在 wx.grid 表格中

pip install openpyxl openpyxl-3.1.2-py2.py3-none-any.whl (249 kB) et_xmlfile-1.1.0-py3-none-any.whl (4.7 kB) 摘要&#xff1a;A Python library to read/write Excel 2010 xlsx/xlsm files pip install wxpython4.2 wxPython-4.2.0-cp37-cp37m-win_amd64.whl (18.0 M…

微擎小程序获取不到头像和昵称解决方案

这是一个使用微擎小程序的代码示例&#xff0c;其中包含了获取用户头像和昵称的功能。以下是解决方案&#xff1a; 首先&#xff0c;在<button>标签上添加open-type"chooseAvatar"属性&#xff0c;并绑定bindchooseavatar事件&#xff1a; <button class&qu…

数据结构-快速排序-C语言实现

引言&#xff1a;快速排序作为一种非常经典且高效的排序算法&#xff0c;无论是工作还是面试中广泛用到&#xff0c;作为一种分治思想&#xff0c;需要熟悉递归思想。下面来讲讲快速排序的实现和改进。 老规矩&#xff0c;先用图解来理解一下&#xff1a;&#xff08;这里使用快…

MATLAB中syms函数使用

目录 语法 说明 示例 创建符号标量变量 创建符号标量变量的向量 创建符号标量变量矩阵 管理符号标量变量的假设 创建和评估符号函数 syms函数的作用是创建符号标量和函数&#xff0c;以及矩阵变量和函数。 语法 syms var1 ... varN syms var1 ... varN [n1 ... nM] …

指数分布优化器(EDO)(含MATLAB代码)

先做一个声明&#xff1a;文章是由我的个人公众号中的推送直接复制粘贴而来&#xff0c;因此对智能优化算法感兴趣的朋友&#xff0c;可关注我的个人公众号&#xff1a;启发式算法讨论。我会不定期在公众号里分享不同的智能优化算法&#xff0c;经典的&#xff0c;或者是近几年…

“秋天第一只大闸蟹”背后,看见京东一体化供应链

京东似乎正在从一个大闸蟹的物流服务商、销售商&#xff0c;转变为一个大闸蟹的“供货商”。 作者|斗斗 编辑|皮爷 出品|产业家 阳澄湖连续几天的降雨&#xff0c;使得通往蟹塘的路异常难走。 长期驻扎此地的京东相关负责人蹲在蟹塘边的小路上&#xff0c;指着蟹塘说道…

【RabbitMQ 实战】08 集群原理剖析

上一节&#xff0c;我们用docker-compose搭建了一个RabbitMQ集群&#xff0c;这一节我们来分析一下集群的原理 一、基础概念 1.1 元数据 前面我们有介绍到 RabbitMQ 内部有各种基础构件&#xff0c;包括队列、交换器、绑定、虚拟主机等&#xff0c;他们组成了 AMQP 协议消息…

QQ登录的具体流程

文章目录 网站授权QQ登录QQ登录的完整流程代码示例1. 添加依赖2. 配置文件3. 实现Service4. 创建Controller 网站授权QQ登录 首先需要去QQ互联申请应用填写网站的相关信息&#xff0c;以及回调地址&#xff0c;需要进行审核。申请流程暂时不说了&#xff0c;百度一下挺多申请失…

Cocos Creator3.8 项目实战(五)背景无限滚屏效果如何实现

在游戏中&#xff0c;我们经常会实现背景无限滚动的效果。那这些效果是怎么实现的呢&#xff1f; 原理很简单&#xff0c;就是使用多张背景图&#xff0c;每张图&#xff0c;每一帧都同时移动&#xff0c;当图移出屏幕外时&#xff0c;将其位置设置到下一张图的初始位置&#x…

23云计算全国职业技能大赛容器云-容器编排

erp 2.2.1 容器化部署 MariaDB [0.5 分]2.2.2 容器化部署 Redis [0.5 分]2.2.3 容器化部署 Nginx [0.5 分]2.2.4 容器化部署 ERP[0.5 分]2.2.5 编排部署 ERP管理系统[1 分] 2.2.1 容器化部署 MariaDB [0.5 分] 编写 Dockerfile 文件构建 mysql 镜像&#xff0c;要求基于 centos…

【AI视野·今日NLP 自然语言处理论文速览 第四十八期】Thu, 5 Oct 2023

AI视野今日CS.NLP 自然语言处理论文速览 Thu, 5 Oct 2023 Totally 50 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computation and Language Papers Retrieval meets Long Context Large Language Models Authors Peng Xu, Wei Ping, Xianchao Wu, Lawrence McA…

[架构之路-231]:计算机硬件与体系结构 - 性能评估汇总,性能优化加速比

目录 一、计算机体系结构 二、计算机性能评估 2.1 分类方法1 2.2 分类方法2 三、常见的专项性能测试工具 3.1 浮点运算性能&#xff08;FLOPS&#xff09; 3.2 综合理论性能法 3.3 历史基准测试&#xff08;跑分软件&#xff09;&#xff1a;通过运行典型的综合性的程序…

反爬虫机制与反爬虫技术(一)

反爬虫机制与反爬虫技术一 1、网络爬虫的法律与道德问题2、反爬虫机制与反爬虫技术2.1、User-Agent伪装2.2、代理IP2.3、请求频率控制2.4、动态页面处理2.5、验证码识别3、反爬虫案例:豆瓣电影Top250爬取3.1、爬取目标3.2、库(模块)简介3.3、翻页分析3.4、发送请求3.5、提取…

【VUE·疑难问题】定义 table 中每行的高度(使用 element-UI)

一、如何定义 table 中每一行的 height &#xff1f; 1.table例子 <!-- 二、table --><div style"overflow: hidden;display: block;height: 68vh;width: 100%;"><el-table stripe show-header style"width: 100%" :data"tableData&q…

mysql面试题20:有哪些合适的分布式主键方案

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 面试官:有哪些合适的分布式主键方案? UUID:UUID通常是由一个二进制的128位整数表示,可以保证全局的唯一性。在Java中,可以通过UUID类生成一个UUID。例…

浏览器性能优化

IIFE惰性函数 有一些函数在运行时需要进行一些判断&#xff0c;但是这个判断只需要执行一次&#xff0c;代码一旦运行判断结果就不会改变&#xff0c;这样的函数称为惰性函数&#xff0c;可以使用下面的手段来进行优化 // 优化前&#xff0c;每次调用都需要进行一次判断 functi…

Hadoop伪分布式环境搭建

什么是Hadoop伪分布式集群&#xff1f; Hadoop 伪分布式集群是一种在单个节点上模拟分布式环境的配置&#xff0c;用于学习、开发和测试 Hadoop 的功能和特性。它提供了一个简化的方式来体验和熟悉 Hadoop 的各个组件&#xff0c;而无需配置和管理一个真正的多节点集群。 在 Ha…

定量活性关系(QSAR)是什么?定量结构-性质关系(QSPR)是什么?

定量活性关系&#xff08;QSAR&#xff09;是什么&#xff1f; 定量活性关系&#xff08;QSAR&#xff0c;Quantitative Structure-Activity Relationship&#xff09;分析是指利用理论计算和统计分析工具来研究系列化合物结构&#xff08;包括二维分子结构、三维分子结构和电…

C++ 学习系列 -- std::list

一 std::list 介绍 list 是 c 中的序列式容器&#xff0c;其实现是双向链表&#xff0c;每个元素都有两个指针&#xff0c;分别指向前一个节点与后一个节点 链表与数组都是计算机常用的内存数据结构&#xff0c;与数组连续内存空间不一样的地方在于&#xff0c;链表的空间是不…

使用libmodbus库开发modbusTcp从站(支持多个主站连接)

使用libmodbus库开发modbusTcp从站&#xff08;支持多个主站连接&#xff09; Chapter1 使用libmodbus库开发modbusTcp从站(支持多个主站连接)rdsmodbusslave.hrdsmodbusslave.cppmain.cpp Chapter1 使用libmodbus库开发modbusTcp从站(支持多个主站连接) 参考链接&#xff1a…