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属性的值不会引发组件重新渲染