React hooks总览

常用的hooks

useState:状态管理,它对标类组件中的setState,useState与useEffect一起联用可以在一个状态值改变时,做出一些副作用(数据请求或一些其它函数任务)

setState+类组件的生命周 === useState + useEffect

react的数据更新与vue是不同的,react是单向数据流,很多时候通过useState去更新dom展示的值,在vue中只需要初始化的值被ref和reactive修饰时,数据就能跟着动态更新了

useEffect:副作用处理,它可以模拟类组件的生命周期,当它依赖的值发生改变时,会执行副作用

useContext:上下文消费,它解决的是props drilling(穿透式传参)的问题,顶层共享数据,不需要通过每一层中转,任意层级的组件都能读取

useContext很像vue里的provide依赖与inject注入的作用,可以实现隔代组件通信

useCallback: 回调缓存,用于缓存函数引用。只有依赖数组变化时,才返回一个新的函数,依赖不变则返回上次那个函数对象

useMemo:值的缓存,规避每次值改变时都触发dom的重渲染 。

它有一点像vue中的computed计算属性,当依赖的值改变时会触发一次新的计算过程,返回一个新的值

useRef:一个在组件整个生命周期内保持同一引用的可变对象,它的值放在.current里,读写ref.current不涉及react的调度与渲染

useReducer:复杂的状态逻辑,useState是一个特殊的useReducer,它将多个状态统一在一个入口dispatch(action)发生,状态变迁集中在reducer纯函数里,使复杂的状态逻辑可预测、可测试。

优化策略

相关推荐
2601_967987373 小时前
Next.js 文档
react·开发·全栈·文档·next.js
前进的李工4 小时前
Agent 学习笔记 01:从工具调用到 ReAct 循环
笔记·学习·llm·agent·react·工具调用
Oiiouui1 天前
关于 Logto 登录系统的体验以及建议
javascript·安全·react
ZoeLandia1 天前
React11:数据请求与 TanStack Query
前端·react.js·typescript·react
漫步的猪3 天前
# 告别混乱与付费墙!Linkit:完全免费、本地优先的开源 AI 智能书签与收藏夹管理神器
人工智能·ai·开源·react·免费·书签·收藏夹
ZoeLandia6 天前
React03:useState 与不可变更新
前端·react.js·typescript·react
莫逸风7 天前
【毕设源码二期01】校园失物招领系统:从发布线索到核验交接
spring boot·毕业设计·课程设计·react
Shockang10 天前
TanStack Router 实战:URL 校验、Loader 与路由权限
typescript·react·路由·前端开发·tanstack router
小天源13 天前
智叟云集系统架构解析:从品牌 AI 可见度监测到前后端协同
人工智能·react.js·系统架构·node.js·react·ai监测·ai品牌监测
guslegend17 天前
工程地基、Provider 与 ReAct 循环:Agent 核心能力的设计、实现与验收
人工智能·agent·react·架构设计·spring ai