最近也是开始实习了兄弟们,找了一家工资还可以的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 来缓存。