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

优化策略

相关推荐
西瓜太郎12343 天前
外层模型卡片与分组详情成功率不一致,应该怎么排查?
前端·typescript·go·软件工程·react
星辰徐哥3 天前
本地视频预览别只自己看:把Remotion动效项目发给客户远程验收
docker·ai·node.js·html·音视频·react·remotion
知兀4 天前
【前端】受控和非受控组件
前端·javascript·react
醉颜凉5 天前
React触摸事件全解析:掌握移动端交互开发的核心秘籍
react·前端开发·触摸事件·移动端交互·react事件
递归尽头是星辰5 天前
Java 智能体工程化:从 Spring AI 出发读懂 AgentScope
react·智能体·springai·javaai·agentscope
Richown9 天前
React 高级模式:并发渲染下的状态机驱动架构——从 Finite State Machine 到生产级实现
区块链·react
LayZhangStrive9 天前
Agent开发 - 实现人类与Manus智能体的终端窗口命令交互
ai·交互·agent·react·终端·manus
名字还没想好☜11 天前
React 实现暗黑模式切换:localStorage 持久化、SSR 首屏闪烁与跟随系统主题
前端·javascript·react.js·ecmascript·react·next.js
ZGG00315 天前
真题拆解 05:ReAct 还是 Plan-and-Execute——规划范式怎么选
python·agent·react