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

相关推荐
泰勒疯狂展开14 小时前
Vue3研学-组件的生命周期
开发语言·前端·vue
千寻技术帮16 小时前
10392_基于SpringBoot的大学迎新系统
mysql·vue·源码·springboot·代码·新生报到
总爱写点小BUG2 天前
VU-Icons:打造极致体验的 Vue3 & UniApp 双端 SVG 图标库
uni-app·vue·组件库·图标组件库
换日线°3 天前
微信小程序对接位置服务(腾讯、高德)完成路径规划
前端·微信小程序·vue
攻城狮7号3 天前
不懂代码也能造?TRAE+GLM-4.6 手把手教你搭心理咨询智能客服小程序
python·小程序·uni-app·vue·trae·glm我的编程搭子·glm-4.6
@AfeiyuO3 天前
Vue 引入全局样式scss
前端·vue·scss
Da Zeng4 天前
VUE3 script 标准写法顺序
vue
Mr-Wanter4 天前
vue 解决img图片路径存在但图片无法访问时显示错误的问题
前端·vue·img
球球不吃虾4 天前
分享一个简单的交互式塔罗牌抽牌应用
前端·vue