- jsx语法过于灵活,在组件每次setState的时候,整个组件树都会递归的遍历并且render一遍,所以你需要手动的告诉React,那些那些组件不需要重复render,而且Vue2使用模板SFC来组织代码,更方便在编译时优化代码
- 设计思路上的不同,React采用了Fiber的架构,将渲染细节尽可能多的提供给了开发者
- 而Vue在编译上的优化
proxy代理
静态提升
更新标记类型(创建Vnode的时候会标记每个元素的更新类型)
组件级别watcher
树结构打平
事件缓存等
Vue3中的Props,State都会转换成reactive对象(Vue2是observable),Vue很清楚组件哪里需要更新,哪里不要更新,都会使得这些渲染细节没有必要暴露给开发者,React是简单的,Vue是容易的
- React属于运行时框架,Vue输入编译+运行时框架,svelte属于纯编译型框架,react的优化需要在运行阶段进行,而且Vue在编译阶段就能做很多优化处理
React对此繁琐的优化进行的努力?
React Forget
正在开发中,React Conf 2021 黄玄提供的分享.编译器帮你做了memo
useEvent
一个还处于RFC阶段的草案,一直返回一个相同的函数引用,并且能保证拿到最新的state,内部使用useRef进行持久化,类似于ahooks的useMemoizedFn
const onclick = useEvent(()=>{
....
});
...