当前位置: 首页 > news >正文

react函数组件常用的几个钩子函数useState、useEffect、useRef、useCallback

react框架

react框架包括包括两大类:类组件+函数组件。

类组件构成:constructor+自定义方法。调用方法通过this.方法名()。constructor(super+state)构造器里面必有super字段。render()方法里面写页面布局。

函数组件构成:各种钩子函数+return()方法里面写页面布局。钩子函数是use开头的系列。

函数组件常用的钩子函数useState、useEffect、useRef、useCallback

一、useState

定义:

useState是react自带的一个hook函数,它的作用是用来声明状态变量。

详细解释:在项目中,我们通过react-redux 或者dva数据存储框架进行全局声明并保存state中的数据。可是如果我们想在当前操作的index.tsx或者index.jsx中使用state,可以通过useState()钩子函数进行声明某一个当前页面的state数据状态。

用法:

const [ count , setCount ] = useState(0);useState(params) 设置 第一个参数的初始值 
count 是第一个参数解构出的第一个参数 
setCount 是第二个参数 是一个函数 用来设置count 

二、useEffect

定义:

什么是副作用

​ 副作用是相对于主作用来说的,一个函数除了主作用,其他的作用就是副作用。对于 React 组件来说,主作用就是根据数据(state/props)渲染 UI,除此之外都是副作用(比如,手动修改 DOM)

常见的副作用

数据请求 ajax发送

手动修改dom

localstorage操作

用法:

useEffect函数的作用就是为react函数组件提供副作用处理的!

useEffect(() => {},[])接受2个参数,第一个是函数,第二个是数组
如果第二个参数数组为空 它就是componentDidMount 只有第一次渲染
如果二个参数数组 里面的值 设置的 值改变 它就是componentDidUpdate 只要值改变了 他就渲染
useEffect 内部 最外层 支持return () => 相当于 componentWillUnmount 卸载 来开当前组件的时候触发 并且 每次更新都触发。

相同点: useState 和 useEffect 支持写多个

实际使用:

在项目中,结合dva,在页面组件中发起网络请求。

useEffect(() => {函数},[])
{dispatch({参数})}
{type:'model模块名/某一个方法',  //namespace如果在model外调用,需要添加。payload:{}  //写法:state中定义的属性:属性值。需要传递的信息。
}

三、useRef

定义:

使用useRef获取Dom元素,可以再useEffect中立马使用。

useEffect在页面组件中会渲染两次,根据react框架的设计者的设定,无法在初次渲染中拿到DOM(真实的Dom节点),不能通过document.getElementByID('#id名')这种方式获取真实的dom节点。

ref的拿取:callbackRef

通过callbackRef,在组件挂载后,操作该dom。会在真实Dom生成时执行。使用callbackRef,使用它用回调函数的方式获取ref,进而保存使用。

使用步骤:

const myRef = useRef()
myRef.current = 赋值
render/return (...)
<div ref={myRef}> 
</div>

四、useCallback

使用useCallback来包装函数

  1. 不是为了性能优化。

  1. 而是为了不生成新的回调函数,让diff对比时发现差异,不会 再次执行回调。

  1. react框架有虚拟dom的概念,并且是它最先提出来的!

http://www.lryc.cn/news/31891.html

相关文章:

  • 4N60-ASEMI高压MOS管4N60
  • 现代神经网络(VGG),并用VGG16进行实战CIFAR10分类
  • Java代码弱点与修复之——Dereference null return value(间接引用空返回值)
  • 【冲刺蓝桥杯的最后30天】day3
  • 光伏发电嵌入式ARM工控机
  • 推荐 7 个 Vue.js 插件,也许你的项目用的上(五)
  • 1.1基于知识图谱的项目实战:优酷搜索泛查询意图优化
  • [java Spring JdbcTemplate配合mysql实现数据批量删除
  • uos 20 统信 fprintd 记录
  • vue移动端h5,文本溢出显示省略号,且展示‘更多’按钮
  • php宝塔搭建部署实战兰空图床程序网站PHP源码
  • 软件测试面试:拿到一个产品(版本)如何开展测试?
  • 【Opencv项目实战】图像的像素值反转
  • Swagger生成接口在线文档
  • 104.第十九章 MySQL数据库 -- MySQL主从复制、 级联复制和双主复制(十四)
  • 第一次使用Python for Qt中的问题
  • .Net Core WebApi 在Linux系统Deepin上部署Nginx并使用(一)
  • Java——打开轮盘锁
  • JavaScript(2)
  • FFMPEG 安装教程windowslinux(CentOS版)
  • 【虹科案例】虹科任意波形发生器在量子计算中的应用
  • 【强化学习】强化学习数学基础:随机近似理论与随机梯度下降
  • ThreadLocal 学习常见问题
  • 文件包含漏洞1 | iwebsec
  • 基于MindAR实现的网页端WebAR图片识别叠加动作模型追踪功能(含源码)
  • ssh 远程连接方式总结
  • springboot+mybatisPlus简单实现数据分页显示
  • axios的基本使用
  • 核心 Android 调节音量的过程
  • 用C/C++制作一个简单的俄罗斯方块小游戏