hooks即为react中的钩子函数。react规定全部以use作为开头。并且使用前需要引入。 注意：钩子只能在react组件中调用。也可以添加到自定义钩子中，最终也是添加到组件中。 （本文参考React学习手册0619 ）
react内置钩子：
import {useState} from 'react'
一、useState
useState是向组件添加一个 状态变量的钩子函数。
状态数据发生变化后，钩子会使用新数据重新渲染所在的组件
使用例子：
const [count setCount] = useState<Number>(0)
- 参数：定义状态的初始值-非必填。
- 返回值：一个数组：[变量名，设置变量的函数]
- 设置变量的函数接受一个参数。一个值/一个函数：值即为改变状态变量的值。函数则为一个参数为初始值，返回新的状态值的函数。
例子：
setCount(pre=>pre+1)//pre为0，状态的新值为0+1=1
注意：useState属于异步函数，更新状态属于异步更新。
二、useReducer
useReducer可以理解为useState的复杂情况处理方案。
const [state,dispatch] = useReducer(reducer, {count:0})
- 参数：接受两个参数：
-
- 第一个参数状态处理函数：内置两个参数。直接看代码
const reducer = (state, action) => {
switch (action.type) {
case 'ADD':
return {...state, count: state.count+ 1}; case 'DEL':
return {...state, count: state.count- 1}; default:
return state;
}
}
-
- 第二个参数：定义的状态初始值
-
返回值：一个数组：[状态值，状态处理函数]
使用例子：
<h1>useReducer---{state.count}</h1>
<Button
onClick={() => {
dispatch({ type: 'ADD' });
}}
>
数字+1
</Button>
<Button
onClick={() => {
dispatch({ type: 'DEL' });
}}
>
数字-1
</Button>
三、useEffeact
useEffeact是一个让渲染产生副作用的钩子函数。副作用：可以理解为函数在返回之外所作的其他事情。
useEffect相当于是在渲染之后调用的一个函数。
使用例子：
useEffect(()=>{
// 副作用函数
},[])
- 钩子接收两个参数：回调函数和依赖数组
- 回调函数：渲染后调用的函数
- 依赖数组：数组中有一个值发生变化，就会调用这个效应。空数组时只在首次渲染后调用效应
四、useEffectLayout
useLayoutEffect 是 useEffect 的一个版本，在浏览器重新绘制屏幕之前触发。
渲染 -> 调用
useLayoutEffect-> 浏览器绘制，即把组件元素添加到DOM中 -> 调用useEffect
官网推荐的用途是：在浏览器重新绘制屏幕之前进行布局测量。因为useLayoutEffect 可能会影响性能。尽可能使用useEffect
五、useCallback
useCallback一个用来缓存函数的钩子
- 参数：第一个参数是想要缓存的函数fn。第二个参数依赖数组dependencies
- fn：任何参数、返回值为任意类型的纯函数
- dependencies：类似useEffect的第二个参数
六、useMemo
useMemo调用一个函数，计算得到一个备忘值缓存起来。只有在首次渲染或者依赖发生变化时，才重新计算并更新这个备忘值。
- 参数：第一个参数计算备忘值的函数calculateValue。第二个参数依赖数组dependencies
- calculateValue：没有参数、返回值为任意类型的纯函数
- dependencies：类似useEffect的第二个参数
七、useRef
useRef一个定义不影响页面渲染的值。也就是说它的改变不会引起页面的重新渲染。可以用来操作dom。
八、useImperativeHandle
useImperativeHandle通过ref暴露传递自己内部方法的钩子。
九、useContext
useContext使用上下文的钩子。
