vue3新特性 compositionAPi与React.js中Hooks的异同点

1. React.js中的Hooks基本使用

React Hooks允 许你"勾入"诸如组件状态 和副作用处理等React功能中。

Hooks只能用在函数组件中,并允许我们 在不需要创建类的情况下将状态、副作用处 理和更多东西带入组件中。React核心团队 奉.上的采纳策略是不反对类组件,所以你 可以升级React版本、在新组件中开始尝试 Hooks,并保持既有组件不做任何更改。 useState和useEffect是React Hooks 中的 一些例子,使得函数组件中也能增加状态和 运行副作用。我们也可以自定义一个 Hooks,它打开了代码复用性和扩展性的新 大门。

2.Vue Composition API基本使用

Vue Composition API围绕一个新的组件 选项setup而 创建。setup) 为Vue组件提 供了状态、计算值、watcher和生命周期钩子 ,并没有让原来的API (Options-based API) 消失。允许开发者结合使用新旧两种API (向下兼容)

3.原理

React hook底层是基于链表实现,调用 的条件是每次组件被render的时候都会顺 序执行所有的hookS。

Vue hook只会被注册调用一一次,Vue 能避开这些麻烦的问题,原因在于它对数据 的响

应是基于proxy的,对数据直接代理观 察。(这种场景下,只要任何一个更改data 的地方,相关的function或者template都会 被重新计算,因此避开了React可能遇到的 性能上的问题)。React中,数据更改的时 候,会导致重新render,重新render又会重 新把hooks重新注册一一次,所以React复杂 程度会高一些。

相关推荐
To_OC26 分钟前
LC 51 N 皇后:我以为难的是回溯,结果栽在了对角线下标
javascript·算法·leetcode
腻害兔32 分钟前
【若依项目-产品经理视角】深度拆解 RuoYi-Vue-Pro 商城模块:从商品管理到交易引擎,50 张表撑起一整套电商系统
java·大数据·vue.js·产品经理·ai编程
小林ixn2 小时前
从零到一理解 React 父子组件通信:手写一个 Todo 应用带你彻底搞懂单向数据流
前端·javascript·react.js
窝子面5 小时前
手搓最简前后端协作-node
javascript·数据库
qetfw5 小时前
MXU:Tauri 2 + React 的 MaaFramework 跨平台 GUI 源码
前端·python·react.js·前端框架·开源项目·效率工具
kyriewen5 小时前
我让AI给前端项目做了一次完整的Code Review——它和人类的差距,比我想的大得多
前端·javascript·ai编程
এ慕ོ冬℘゜6 小时前
前端基础:什么是时间戳?JS获取时间戳三种方法与实战用途
开发语言·前端·javascript
鱼毓屿御6 小时前
从「只会聊」到「边想边做」的跃迁
前端·学习·react.js
sugar__salt7 小时前
Vue3 表单双向绑定与响应式核心 API 技术详解
前端·javascript·vue.js
郝亚军7 小时前
使用Vue 3和Nginx打包和部署Vue.js项目的一般步骤
前端·vue.js·nginx