当前位置: 首页 > article >正文

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 等函数正确的捕获依赖变量,否则会由于依赖不正确使得组件性能下降。

http://www.kler.cn/a/326367.html

相关文章:

  • 风电电力系统低碳调度论文阅读第一期
  • Linux Android 正点原子RK3568替换开机Logo完整教程
  • 爬虫——JSON数据处理
  • 逆向攻防世界CTF系列37-crackme
  • C++中 ,new int(10),new int(),new int[10],new int[10]()
  • 大模型基础BERT——Transformers的双向编码器表示
  • Java LeetCode每日一题(2024.9.26)
  • Unity开发绘画板——04.笔刷大小调节
  • 智能AI对话绘画二合一网站源码系统 带完整的安装代码包以及搭建部署教程
  • XPath入门
  • 65.【C语言】联合体
  • Python | Leetcode Python题解之第442题数组中重复的数据
  • plt注解相关介绍及应用
  • 封装提示词翻译组件
  • K8S:开源容器编排平台,助力高效稳定的容器化应用管理
  • 开放词汇目标检测
  • Unity实战案例全解析:RTS游戏的框选和阵型功能(4)阵型功能
  • 【单元测试】任务1:白盒测试1
  • 完成UI界面的绘制
  • DRF实操学习——购物车及订单生成
  • 【Redis 源码】1下载与源码编译
  • 使用CAPTCHA对反爬虫有优势吗
  • java 解析excel (网络资源)
  • Matlab|计及需求响应消纳风电的电热综合能源系统经济调度
  • 防火墙的区域划分+来自公网、内网的ip欺骗攻击+防御
  • 24.9.25学习笔记