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复杂 程度会高一些。

相关推荐
光影少年2 分钟前
RN与Flutter架构区别
前端·flutter·react native·react.js·架构·node.js
ljt272496066119 分钟前
Vue笔记(九)--defineEmits
javascript·vue.js·笔记
FungLeo9 小时前
成为全栈·React 管理后台篇·总复盘:从“接口能调通”到“后台值得使用”
前端·react.js·前端框架·项目复盘·成为全栈
Mr_Mao14 小时前
告别选型困难!集 VueUse、ahooks、Mantine 于一身:286 个 Hook 的 ReaUse 来了
前端·javascript·react.js
智鸟科技GemeOpen开发者智能设备15 小时前
智能插座二次开发如何接入Home Assistant,从零开始完整工程实现(Python+React)
开发语言·python·物联网·react.js·智能家居
qwfy15 小时前
我要用 AI-native 架构,从零重建一套制造业 ERP/MES
vue.js·spring boot·架构
默_笙15 小时前
🚙 一条腿走路会摔:ES 关键词检索、混合召回与 ReRank 裁判
前端·javascript
dsyyyyy110116 小时前
Vue 3 Watch 监视完全指南
前端·javascript·vue.js
瞬时出道17 小时前
AI 回答为什么能一个字一个字蹦出来?前端搞懂 SSE 这一篇就够了
vue.js
u01110267518 小时前
Vue 3 实现图片裁剪框:拖动、缩放与固定宽高比
前端·javascript·vue.js