React的hooks钩子的使用事项

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

相关推荐
并不会1 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
悦涵仙子1 小时前
CSS中的变量应用——:root,Sass变量,JavaScript中使用Sass变量
javascript·css·sass
衣乌安、1 小时前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜1 小时前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
低代码布道师1 小时前
CSS的三个重点
前端·css
耶啵奶膘2 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^4 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie5 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic5 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿5 小时前
webWorker基本用法
前端·javascript·vue.js