Webpack 模块加载、动态引入机制源码解读

今天的文章简单探讨一下 Vue 和 React 的不同。

本人 Vue2 和 React 都用过，但不熟悉 Vue3，没用它做过项目。

其实我对这两大框架也没有认真钻研过它们的细节，也就是工作上用它们写一些简单业务，或偶尔看看相关的博客文章，但还是有一些浅显的认识的，写下来记录一下。

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

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

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

---

不管如何，Vue 和 React 是两个不同的框架，所以在用法上是有很多不同的。

列一些用法上的区别。

组件 props

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

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

function Component (props) {
  return (
   <div style={props.style} className={classNames('app', props.className)}>
      // ...
    </div>
  )
} 

渲染