React中常见Hooks总结

React中常用Hooks总结

1.useState

React中的 useState 其实就相当于Vue中的ref()和reactive() ,生成响应式数据。

在Vue中数据使用响应式对象( Proxy),Vue会对数据进行劫持,当数据发生改变的时候,Vue会调用Render函数对视图进行更新。reat使用下面的setX()函数调用render。

React.js 使用一种称为虚拟 DOM(Virtual DOM)的机制来实现高效的响应式更新。当状态(State)发生变化时,React.js 会重新计算虚拟 DOM 树,并与之前的虚拟 DOM 树进行比较,找出需要更新的部分,然后仅更新这些部分到实际 DOM。这样可以减少对实际 DOM 的操作,提高性能。

js 复制代码
const [x, setX] = useState(0)
//使用setX改变x的值
//x的值可以直接使用

2.useRef

useRef 是 React 提供的一个 Hook,用于在函数组件中持有一个可变的引用值,该值在组件的整个生命周期中保持不变,而不会引发重新渲染。一般用来访问和操作 DOM 元素: 使用 useRef 来持有对 DOM 元素的引用,以便直接操作这些元素。也可以用于防抖和节流函数中,存储最后一次执行函数的时间戳或计时器 ID。

js 复制代码
const Ref = useRef(null)
<input ref={Ref}/>

// Ref.current 就可以定位到这个input组件

3.useMemo

useMemo相当于 Vue 计算属性(computed),用于优化性能,通过在依赖项未发生变化时缓存计算结果,从而避免不必要的重复计算。我们可以使用 useMemo 来缓存一些计算结果,使得只有在依赖项变化时才重新计算。

  • 用途:记忆化某个计算结果,只有在依赖项改变时才重新计算。
  • 返回值:返回的是计算结果的值。
  • 常见用法:用于优化复杂计算或昂贵的计算,以避免每次渲染时都重新计算。

4.useCallback

useCallback 是一个用于性能优化的钩子,它返回一个记忆的回调函数。这对于在子组件中传递回调函数特别有用,可以防止不必要的重新渲染。

  • 用途:记忆化函数,只有在依赖项改变时才返回新的函数实例。
  • 返回值:返回的是记忆化的函数。
  • 常见用法:用于优化传递给子组件的回调函数,避免因函数引用变化导致的子组件不必要重新渲染。

5.useEffect

组件挂载完成之后 或 组件数据更新完成之后 执行 就像vue的onmounted,updated。

6.useReducer

向组件里面添加一个 reducer。建立store的,可以和redux配合使用。

相关推荐
耶啵奶膘32 分钟前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^2 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie3 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic3 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿3 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具4 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
清灵xmf4 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据4 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161775 小时前
防抖函数--应用场景及示例
前端·javascript
334554325 小时前
element动态表头合并表格
开发语言·javascript·ecmascript