最近也是开始实习了兄弟们，找了一家工资还可以的AIGC公司，但是最让人想不到的是公司用的前端框架是React，我主要学习的是VUE，为了能在公司顺风顺水，也是开始学习React了，之前学的Hooks钩子函数现在才把文章赶出来主要还是本人在学其他的哈哈，话不多说，上才艺！
我是学的神说要有光的小册子。我在学习的过程中进行了总结。大家可以参考，当然最好还是去看原版。 由于版权问题，代码我就不放出来了。
在 react 里，只要涉及到 state 的修改，就必须返回新的对象，不管是 useState 还是 useReducer。
1.useState
状态是数据的变化 state的数据可以更新view层，触发某些事件，交互事件等又会更改state状态，引发view更新。
-
初始值可以通过函数计算useState(()=>{}),不支持异步
-
会返回一个数组，包含state和setState的API，通过解构获取
-
setState后会重新触发包含该状态的组件重新渲染
-
想初次渲染时请求数据并setState？
那就得配合useEffect了
2.useEffect
- 在操作DOM之后异步执行，渲染完成后，依赖数组为state时可能会造成屏幕闪动：渲染完之后执行 effect 改了 state，再次渲染就是新的值了。
- 异步能避免因为 effect 逻辑执行时间长导致页面卡顿（掉帧）
- 参数函数不支持async/await，需要将函数定义在useEffect外部。
- 依赖数组内属性变化会重新触发useEffect，一般写state。不写依赖数组也会重新触发。
3.useLayoutEffect
- 在操作DOM后同步执行，不会造成屏幕闪动
- 超过 50ms 的任务就被称作长任务，会阻塞渲染，导致掉帧
4.useReducer
- 当修改 state 的逻辑比较复杂，用 useReducer。
- setState之前执行一些逻辑
- useReducer 的类型参数传入 Reducer<数据的类型，action 的类型>,然后第一个参数是 reducer，第二个参数是初始数据。
- 它还有另一种重载，通过函数来创建初始数据，这时候 useReducer 第二个参数就是传给这个函数的参数。
5.useReducer + immer
- 直接修改原始的state返回，无法触发渲染，必须返回一个对象
- immer
- 复杂对象的修改用库
- 依赖Proxy，监听属性的修改，创建一个新对象
6.useRef
- 通过ref绑定DOM元素，ref的内容保存在current属性上
- 如何把 ref 从子组件传递到父组件呢?
7.forwardRef + uselmperativeHandle
- forwardRef 将子组件的DOM结构拿到父组件展示 使用方法直接将需要暴露的子组件用forwardRef包裹并用大写变量接收，用于当作标签。
- uselmperativeHandle 将子组件ref的属性和方法传给父组件 它有 3 个参数，第一个是传入的 ref，第二个是是返回新的 ref 值的函数，第三个是依赖数组。
8.useContext
- 跨任意层组件传递数据
- 用 createContext 创建 context 对象，用 Provider 修改其中的值， function 组件使用 useContext 的 hook 来取值，class 组件使用 Consumer 来取值。
9.memo + useMemo + useCallback
-
memo 的作用是只有 props 变的时候，才会重新渲染被包裹的组件。
-
memo 是防止 props 没变时的重新渲染，useMemo 和 useCallback 是防止 props 的不必要变化。
-
useCallback的作用就是当 deps 数组不变的时候，始终返回同一个 function，当 deps 变的时候，才把 function 改为新传入的。
-
useMemo保存值，它是在 deps 数组变化的时候，计算新的值返回。
-
useMemo 和 useCallback 也不只是配合 memo 用的： 比如有个值的计算，需要很大的计算量，你不想每次都算，这时候也可以用 useMemo 来缓存。