Vue3的Composition API与React的Hooks

简介: Vue3的Composition API与React的Hooks

Composition API解决了什么问题?

为了降低Vue2代码模式中复杂组件的代码维护难度,Vue3.0提出了新特性Composition API。

  • 以函数为基础单位来打包可复用逻辑,并注入到任意组件,让视图和业务解耦更优雅
  • 碎片化使得相同功能的业务放置更紧凑,提高开发体验

Composition API VS React的hooks

实现原理

  • React hook基于链表实现,每个hook的next是指向在一个hook的(由于在函数里使用hook会导致顺序不正确,因此react不允许这样使用),每次组件被render时会顺序执行全部的hooks。React数据更改时,会重新执行render,从而会使hook重新注册一次。(在每一轮渲染期间生成的临时闭包函数增加GC压力)
  • Vue hook只会在setup函数被调用时注册一次。因为vue中的数据响应是基于proxy的。 Composition API的实现借鉴了React Hooks,但是其自然的响应式数据,完美的避开了React Hooks的缺点。

参考链接:

Introduction - Composition API

Vue3 的新特性(二) —— Composition-Api

setup vs 5 react hooks,助你避开"沟"中陷阱

Vue 3.0 Hook PK React Hook



相关文章
|
3天前
|
存储 前端开发 JavaScript
React Hooks 的替代方案有哪些?
【5月更文挑战第28天】React Hooks 的替代方案有哪些?
11 2
|
3天前
|
前端开发 JavaScript 开发者
React Hooks 的应用场景有哪些?
【5月更文挑战第28天】React Hooks 的应用场景有哪些?
10 1
|
3天前
|
前端开发 JavaScript 开发者
React Hooks 是在 React 16.8 版本中引入的一种新功能
【5月更文挑战第28天】React Hooks 是在 React 16.8 版本中引入的一种新功能
13 1
|
14天前
|
前端开发
React Hooks - useState 的使用方法和注意事项(1),web前端开发前景
React Hooks - useState 的使用方法和注意事项(1),web前端开发前景
|
15天前
|
前端开发 JavaScript
React Hooks:让你轻松掌握函数组件的状态与管理
React Hooks:让你轻松掌握函数组件的状态与管理
|
15天前
|
JavaScript 架构师 API
Vue 3.x全面升级指南:Composition API深度探索
Vue 3.x 的全面升级引入了 Composition API,这是对 Vue 2.x 传统 Options API 的一个重大改进,它提供了更加灵活和模块化的代码组织方式.
15 0
|
15天前
|
JavaScript 前端开发
vue3中使用jsx报错React is not defined和h is not defined
vue3中使用jsx报错React is not defined和h is not defined
|
16天前
|
缓存 前端开发
Web开发:深入探讨React Hooks的使用和最佳实践
Web开发:深入探讨React Hooks的使用和最佳实践
23 0
|
16天前
|
存储 前端开发 JavaScript
React Hooks实战:从useState到useContext深度解析
React Hooks 深度解析:useState用于函数组件的状态管理,通过初始化和更新状态实现渲染控制;useContext则提供跨组件数据传递。useState的状态更新是异步的,不支持浅比较,可结合useEffect处理副作用。useContext在多层组件间共享状态,但可能导致不必要的渲染。两者结合可创建复杂应用场景,如带主题切换的计数器。了解其工作原理和优化策略,能有效提升React应用性能。
28 0
|
16天前
|
JavaScript API 开发者
Vue3有哪些常用的API
Vue3有哪些常用的API
13 1