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纯函数里,使复杂的状态逻辑可预测、可测试。

优化策略

相关推荐
FungLeo2 天前
成为全栈·Next.js 网站前台篇·站点设置如何驱动页头、页脚与 SEO
react·isr·next.js·metadata·成为全栈·站点配置
大连好光景2 天前
ReAct的原理?与CoT的区别是啥?
react·cot
大连好光景2 天前
Agent完整工作过程
react·agent完整工作流程
FungLeo4 天前
成为全栈·Next.js 网站前台篇·同源 BFF 代理:API、附件、Cookie 与跨站写入保护
react·csrf·next.js·bff·成为全栈·route handler
Alice-YUE4 天前
React 渲染机制速通:Render 树、Fiber 树与更新调度
前端·react.js·前端框架·react·fiber·前端性能·渲染机制
传奇开心果编程5 天前
【现代声明式UI学与练】第1课 从命令式UI到声明式UI
学习·flutter·ui·swiftui·react·android jetpack
frjc5 天前
前端技术选型:主流方案对比与落地建议
vue·react·angular
FungLeo10 天前
成为全栈·Next.js 网站前台篇·数据获取与缓存:60 秒再验证背后到底发生了什么
react·isr·next.js·成为全栈·react cache·opennext
liangshanbo121516 天前
React 性能瓶颈定位面试题——原理深挖版
react·performance·profiler
liangshanbo121516 天前
React 性能优化实战
性能优化·react