Composition API 与 React Hook 很像,区别是什么?

从 React Hook 的实现角度看,React Hook 是根据 useState 调用的顺序来确定下一次重渲染时的 state 是来源于哪个 useState,所以出现了以下限制:

  • 不能在循环、条件、嵌套函数中调用 Hook;
  • 必须确保总是在你的 React 函数的顶层调用 Hook;
  • useEffect、useMemo 等函数必须手动确定依赖关系。

而 Composition API 是基于 Vue 的响应式系统实现的,与 React Hook 的相比:

  • 声明在 setup 函数内,一次组件实例化只调用一次 setup,而 React Hook 每次重渲染都需要调用 Hook,使得React 的 GC 比 Vue 更有压力,性能也相对于 Vue 来说也较慢;
  • Compositon API 的调用不需要顾虑调用顺序,也可以在循环、条件、嵌套函数中使用;
  • 响应式系统自动实现了依赖收集,进而组件的部分的性能优化由 Vue 内部自己完成,而 React Hook 需要手动传入依赖,而且必须保证依赖的顺序,让 useEffect、useMemo 等函数正确的捕获依赖变量,否则会由于依赖不正确使得组件性能下降。

虽然 Compositon API 看起来比 React Hook 好用,但是其设计思想也是借鉴 React Hook 的。

相关推荐
ocean21039 小时前
八股刷题之:变体树
面试·面试题·面试真题·变体树·八股精·深度拓展·高效刷题
碧水澜庭11 小时前
头条【vue+fastapi 】全栈教学项目系列之《02_双系统零基础环境搭建手册》
vue·fastapi
DsirNg2 天前
从 `@wheel.prevent.stop` 到事件捕获:一次讲清浏览器事件流与 Vue 事件修饰符
javascript·vue·事件修饰符·事件冒泡·dom 事件·事件捕获·wheel
其美杰布-富贵-李2 天前
Vue 3 模板语法速通:彻底理解 `:`、`@`、`#`、`v-if`、`v-for` 与 `v-model`
vue
DsirNg3 天前
基于拓扑排序的画布自动布局:用最长上游路径决定节点列级
vue·流程图·拓扑排序·状态管理·有向图·自动布局·最长路径
way_hj4 天前
Flask笔记(2)快速web项目
笔记·flask·vue·web
Sterting4 天前
初识Vue3与开发环境搭建
前端·vue
sugar__salt5 天前
跟着 Demo 学 Pinia:两种仓库写法 + 完整 TodoList 复现
前端·javascript·vue.js·前端框架·vue
弹简特5 天前
【Vue3速成】09-Element Plus 核心组件实战与原理解析
vue·element-plus
钛态6 天前
AI 辅助:前端框架反模式:过度封装、状态滥用与副作用失控
前端·vue·react·web