React hooks

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