React hooks

本文详细介绍了React Hooks中的核心概念,包括useState用于管理组件状态,useEffect处理副作用,useLayoutEffect在所有DOM变更后同步执行,useMemo用于值的缓存,以及useRef创建可变的引用对象。每个Hook的使用规则、参数解析及应用场景都进行了阐述。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

hoos规则:

hooks通常放在组件顶部

hooks不能写在if语句里面

1.useState(initState)

用于为函数组件引入状态state

可接受状态的初始值作为参数

返回一个数组,数组的第一个成员是一个变量,指向状态的当前值;数组的第二个成员是一个函数,用来更新状态;

注意点:

setState() 不一定是同步的,为了提升性能,React会批量执行state更新和DOM渲染

setState() 并不会立即改变state,而是创建一个即将处理的state

不要依赖state的值来更新下一个状态

2.useEffect()

负责执行副作用

第一个参数,是一个函数,组件每渲染一次,该函数就会自动执行一次,组件首次在网页DOM加载后,该函数也会执行

第二个参数,是一个依赖项数组,如果依赖项数组不为空,那么当依赖项发生变化时,副作用函数会执行;如果依赖项数组为空,那么副作用函数只会在组件加载DOM后执行一次

允许返回一个函数,该函数会在组件写在时执行,用于清理副作用,如果不需要清理,可以不用返回;(主要用于处理监听事件,在组件卸载时移除监听)

如果有多个副作用,应该调用多个useEffect()

3.useLayoutEffect()

参数和useEffect()一致,但是该hook是在所有DOM变更之后同步调用,可以使用它来读取DOM布局并同步触发重新渲染

在浏览器执行绘制之前,useLayoutEffect()内部的更新计划将被同步刷新

即如果是需要对DOM做一些操作,可以使用useLayoutEffect

4.useMemo()

负责缓存值

第一个参数,是一个函数,该函数会在渲染期间执行

第二个参数,是依赖项数组,当依赖项发生变化时,会执行第一个参数函数,并将函数执行后的值返回

5.useRef()

返回一个 可变的ref对象,其current属性被初始化为传入的参数

返回的ref对象在组件的整个生命周期内持续存在

当ref对象内容发生变化时,useRef并不会通知

变化current属性的值不会引发组件重新渲染

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值