React题库

React和vue的区别

• 都有组件化思想

• 都支持服务器端渲染

• 都有Virtual DOM（虚拟dom）

• 数据驱动视图

• 都有支持native的方案：Vue的weex、React的React native

• 都有自己的构建工具：Vue的vue-cli、React的Create React App

写在前面：

前端选型无非是考虑包体积和响应速度两种，目前的前端框架都需要编译这一步骤，分为构建时编译（AOT），宿主环境执行时编译（JIT）【区别：JIT首次加载慢于AOT，因为需要先编译，且体积可能大于AOT，因为运行时会增加编译器代码】，Angular提供了两种方式但是没人用。

借助AOT对模板语法编译时的优化，比如vue3由于模板是固定的，因此在编译时可以分析模板语法中的静态部分和动态部分做出优化，Svelte可以利用AOT直接建立这部分的关系，在运行时当自变量发生变化直接驱动UI变化，但是JSX很灵活导致很难进行静态分析。【react采用prepack进行过改进，但2019年放弃了。也尝试过使用forget自动生成等效于memo等的代码的编译器，但使用模板减少了jsx的灵活性，也有人使用millionJS直接将元素绑定在dom上等】。

既然jsx无法实现AOT，那么就采用了vDom进行优化，并把memo等缓存交给程序员进行work。

前端框架分为元素级（svelte），组件级（vue），应用级（react），对于svelte来说，由于可以确定自变量是否变化，如果组件没有使用store则不会引入这一特性，会使得其对于小型应用比react的体积小，对于大型应用由于元素级直接绑定dom导致体积逐渐增大。vue采用模板语法，建立自变量与组件之间的关系，因此可以受益于AOT。react每次从应用的根节点开始遍历，甚至不知道哪个自变量变了就开始更新，导致不需要细粒度更新和AOT，当然也采用了调度，时间切片等进行优化。

框架性能瓶颈：

**react：**

高频率的交互往往会导致明显的性能问题，在 antd 的 Form 组件也使用了将数据下放到每一个 Item 的方式来优化性能，store 中用 useRef 存储数据而不是 useState，antd 内部为每个 Form.Item 定义了 forceUpdate 来强制更新 Item UI。又例如拖拽/resize等事件。此时我们只需要通过操作原生 DOM 的方式来实现对应的逻辑即可。从而绕开高频率的 diff 逻辑。

react 常常因为闭包问题，被各种攻击。认为这是 react 的缺陷。

事实上，原生 DOM 本身在高频交互上也存在明显的性能瓶颈。因此许多前端项目不得不采用抛弃 DOM 渲染的方式来完成整个项目【DOM 换成了 canvas，或者 webGPU..】。但是这些项目我们仍然可以结合 react 来完成，例如著名的前端项目 **Figma**，或者国内有的团队使用 react + skia 的方式来完成一些对性能要求很高的项目

**Solid：**

 为了极致的性能体验，完全弃用了虚拟 DOM，也就意味着，他放弃了跨平台的特性。只把主要精力集中在 web 项目上。也就是说，他的全局生态建设，永远也赶不上 react。

**vue：**

丢失响应式，如解构。