论Vue和React的不同之处

Vue 和 React 都是用于构建 UI 界面的流行框架。

它们的哲学也有很多相似的地方，我们可以认为这些特性是流行前端框架的一个趋势。它们是：

• 组件化。将结构、样式、脚本进行耦合，让界面一部分区域能够独立出来，并可以提供复用；
• 声明式。摒弃了 JQuery 那种手动操作 DOM 的刀耕火种的方式，而是通过声明一些状态，当状态改变时自动更新 DOM
• 虚拟 DOM。虚拟 DOM 是对真实 DOM 的模拟，但比真实 DOM 轻量，用作新旧树对比计算出补丁。此外虚拟 DOM 作为真实 DOM 的抽象，让跨平台成为可能，不同平台实现自己的虚拟 DOM 即可。
• Hook。React 带来了 Hook 概念，用于管理状态，并成为了潮流。

组件props

Vue 的组件在表现上更接近原生 DOM 节点，在上面加原生的 class、id、style 等 props，是会被添加到 Vue 组件的根节点上的，添加 style 和 class 会比较方便。

而 React 组件的所有 Props 你都需要自己处理，像是 style 和 class 这些 props 是要自己手动处理的。

渲染

Vue 的渲染是基于模板（Temple），写起来更像是 HTML，对于新手来说，更加容易上手。

React 则是用 JS 通过嵌套的 React.createElement 来描述 DOM。因为用 React.createElement 比较繁琐，React 推出了 JSX，对 JS 扩展了一些语法，能够使用接近 HTML 的写法来表示 React.createElement。

从灵活性上来说，JSX 要比 Temple 要灵活一些，更方便在里面加各种逻辑，调用各种函数生成一些 ReactElement，插入到 JSX 中。

Temple 没这么灵活，本质是字符串。你需要用到一些指令去完成一些逻辑，比如 v-if、v-for，但更方便做性能的优化。

上手难易度

Vue 比 React 对新手更加友好。中文文档上，vue比react要好得多。当然这也可能是因为vue的作者是国人，中文的语法肯定要比外国人写的要好的多得多，更加贴近我们的用法习惯，而react的语法翻译过来，会比较生硬，也可能是直接从翻译软件上翻译过来的，并没有人真的去做这个操作。

React 引入了很多优秀的东西，但对新手来说学习成本就提高了很多很多。比如高阶组件、JSX等等。

React 技术选型更丰富。

如果是 Vue，那 Vue 官方自己已经提供了周边的套件了。CSS 方案直接用 CSS-Scoped，状态库用 Vuex 或 Pina。

对 React 团队来说，他们将周边库的开发交给了社区，所以你能收获各种各样不同的轮子，然后在上面纠结半天。CSS 方案，可以用 CSS-Module、styled-components、Radium 等。状态库，你可以用 Redux、Mobx、Zustand、Recoiler、Dva 等。

在你经历了不少项目后，你会发现 Vue 的技术选型比较稳定，React 的技术选型则是五花八门。

流行程度

个人认为是不相上下的，现在vue的生态越加丰富，vue的写法更加适合学习，模板套用很是方便，大大提升了在开发者心中的形象。而react除大型项目，没必要使用，而且react的社区主要活跃在国外，对于国内开发者来说，这又是一个阻挡学习的原因。

性能

Vue 的性能优于 React。

Vue 的响应式可以做到只更新必要的组件，性能更优。

Vue 的底层是响应式，它会劫持状态的读写，进行细粒度的依赖收集。当状态变化时，只有用到它的组件才会更新。

React 则是纯正的单向数据流，数据从父组件流向子组件。当父组件更新时，子组件也会更新，即使这个子组件的状态没有变化。为了跳过这种无必要的渲染，我们需要额外使用 React.memo 做缓存，需要付出不小成本，一不小心还会整成负优化。

灵活与规范

Vue 更规范，React 更灵活。

Vue 的单文件组件（.vue 后缀的文件）指的是一个文件里，放入了 temple、script 和 style，来代表一个完整的组件。在这个文件里，你只能声明一个组件，不能声明多个。

但 React 可以在一个文件里声明多个组件。你可以将样式放到另一个文件，然后引入进来。你可以多个组件共用同一份样式文件，你可以在组件内用 renderXx 来嵌套一个有相同上下文的组件。它很灵活，但也是双刃剑，它会让水平不足的同事肆意破坏一切。

React 太灵活，虽然可以天马行空地用你更舒服的方式去实现需求，但它下限低。