为什么Vue没有React那么多性能优化API?

3,105 阅读1分钟
  1. jsx语法过于灵活,在组件每次setState的时候,整个组件树都会递归的遍历并且render一遍,所以你需要手动的告诉React,那些那些组件不需要重复render,而且Vue2使用模板SFC来组织代码,更方便在编译时优化代码
  2. 设计思路上的不同,React采用了Fiber的架构,将渲染细节尽可能多的提供给了开发者
  3. 而Vue在编译上的优化
 proxy代理
 静态提升
 更新标记类型(创建Vnode的时候会标记每个元素的更新类型)
 组件级别watcher
 树结构打平
 事件缓存等

Vue3中的Props,State都会转换成reactive对象(Vue2是observable),Vue很清楚组件哪里需要更新,哪里不要更新,都会使得这些渲染细节没有必要暴露给开发者,React是简单的,Vue是容易的

  1. React属于运行时框架,Vue输入编译+运行时框架,svelte属于纯编译型框架,react的优化需要在运行阶段进行,而且Vue在编译阶段就能做很多优化处理

React对此繁琐的优化进行的努力?

React Forget

正在开发中,React Conf 2021 黄玄提供的分享.编译器帮你做了memo

img

img

img

useEvent

一个还处于RFC阶段的草案,一直返回一个相同的函数引用,并且能保证拿到最新的state,内部使用useRef进行持久化,类似于ahooks的useMemoizedFn

const onclick = useEvent(()=>{
  ....
});
...