Composition API 和 React Hook区别 (学习笔记)
Composition API
与React Hook
很像,说说区别?
React Hook
从React Hook的实现角度看,React Hook是根据
useState
调用的顺序来确定下一次重渲染时的state是来源于哪个useState
,所以出现了以下限制:
1.不能在循环、条件、嵌套函数中调用Hook;
2.必须确保总是在你的React函数的顶层调用Hook;
3.useEffect
、useMemo
等函数必须手动确定依赖关系;
Composition API
而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的。
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 上野!
评论