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 的。

相关推荐
Darenm11111 小时前
Vue Router 路由管理
python·vue
by__csdn1 天前
Vue 2 与 Vue 3:深度解析与对比
前端·javascript·vue.js·typescript·vue·css3·html5
❆VE❆1 天前
【技术分享】前端跨窗口/标签页面通信:掌握以下几种方法,提升用户体验(附带常用场景以及典例)
前端·javascript·性能优化·vue·跨标签通信
我叫张小白。1 天前
Vue3计算属性:高效数据处理
前端·javascript·vue.js·前端框架·vue
by__csdn1 天前
Vue 中计算属性、监听属性与函数方法的区别详解
前端·javascript·vue.js·typescript·vue·css3·html5
zhu_zhu_xia2 天前
vue3+vite打包出现内存溢出问题
前端·vue
思密吗喽2 天前
宠物商城系统
java·开发语言·vue·毕业设计·springboot·课程设计·宠物
雨雨雨雨雨别下啦2 天前
【从0开始学前端】vue3简介、核心代码、生命周期
前端·vue.js·vue
紫麦熊3 天前
vue3 keepalive
vue·keepalive
better_liang3 天前
每日Java面试场景题知识点之-线程池配置与优化
java·性能优化·面试题·线程池·并发编程