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 来缓存。

相关推荐
sinat_384241092 分钟前
在有网络连接的机器上打包 electron 及其依赖项,在没有网络连接的机器上安装这些离线包
javascript·arcgis·electron
baiduopenmap14 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish22 分钟前
小程序webview我爱死你了 小程序webview和H5通讯
前端
小牛itbull25 分钟前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
请叫我欧皇i34 分钟前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_36 分钟前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun42 分钟前
空间数据存储格式GeoJSON
前端
GIS瞧葩菜1 小时前
局部修改3dtiles子模型的位置。
开发语言·javascript·ecmascript
zhang-zan1 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium
ZBY520311 小时前
【Vue】 npm install amap-js-api-loader指南
javascript·vue.js·npm