Vue与React对比(基础篇) ：一、Hello World

站长

2022年11月11日 21:33 · 阅读数 29

万年鸽王又回来了！不出所料，我又鸽了很多文章，还能咋办？慢慢补呗。

最新从GitHub上扒了几个项目看了看，自我感觉视野又开阔了不少。要学的东西还有很多。害，学无止境呐。最近可能会从框架用法入手，先把vue、react class、 react hook 的基本用法整理完（当然，中间可能会掺杂其他方面的一些文章），后续再往深入扩展。

此处我们对比的是vue2.0版本、React （钩子版和类写法版）废话不多说，直接开冲！！！

一、Vue 初识

1.1 Vue的定义

Vue 是一套用于构建用户界面的渐进式框架。

英文官网：vuejs.org/

中文官网：cn.vuejs.org/

渐进式的定义：

渐进式指的是你可以在Vue核心功能的基础上任意选用其他的部件，不一定要全部整合在一起。也就是说，我们不必一次性接受并使用它的全部功能特性，后续可以根据自己需要进行相应功能特性的使用。

1.2 Vue 的特点

1. 遵循MVVM模式 ；

MVVM是 Model-View-ViewModel 的缩写，即 模型-视图-视图模型。在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互。vue 通过双向数据绑定把 View 和 Model 连接了起来，而 View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑即可。

2. 声明式渲染；

不需要直接去控制dom，你只要把数据操作好，vue自己会去进行视图层的数据更新，可以节省很多操作dom的代码。

3. 组件化应用；

Vue允许我们使用小型、独立和通常可复用的组件构建大型应用，提高代码复用率、让代码易于维护；

4. 虚拟DOM；

实质是一个JavaScript对象，vue会通过diff算法比对新旧vdom树，记录有变化的部分，并最后再将变化的部分同步到DOM中（不需要整个DOM树重新渲染）。

1.3 Vue 周边生态

vite : 被称为下一代前端开发与构建工具，极大地改善了前端的开发体验，特点就是快；
vue-cli : 快速搭建基于 webpack 的 Vue 项目的开发者工具，目前官方更推荐使用；
vue.js devtools : 用于调试 Vue.js 项目的浏览器 devtools 扩展插件；
vue-resource : Vue.js 插件，提供了使用 XMLHttpRequest 或 JSONP 发出 Web 请求和处理响应的服务；
vue-router：Vue2 的官方前端路由解决方案；
vuex : Vue 官方的状态管理器，分别在 v3 和 v4 两个大版本支持 Vue2 和 Vue3；
pinia: 又一个官方的 Vue 状态管理器，比 Vuex 更轻量，基于 Vue 的组合式 API（composition API），同时支持 Vue2 和 3，被认为是下一代的 Vuex；
vuedraggable : 基于 Sortable.js 的 Vue 拖拽组件；
mint-ui：基于 vue 的 UI 组件库（移动端）；
element-ui：基于 vue 的 UI 组件库（PC 端）；

1.4 helloVueWorld

这一par我们先来试着写下第一行Vue代码 “helloVueWorld”。中间先不要关心为什么这么写，后续的文章后进行详细说明介绍。

1.4.1 前置知识

使用Vue之前我们需要大致了解几个前置知识：

Vue是通过Vue实例对容器内容进行操作的，所以我们要 new 一个Vue的实例并传入一些vue的配置项；
在body里创建一个id为root的div容器，此容器内的语法符合html语法规范，除此之外，我们可以在此容器内利用vue语法进行相关功能逻辑的开发；
Vue 实例与容器是一一对应的关系，并且在实际开发中，只会有一个Vue实例；
我们在容器中想要使用Vue实例中的数据，可以使用差值语法： {{xxx}} （这里的 xxx 要写 js 表达式）或者 指令语法：v-xxx （这里的xxx可以是 bind/model/on ...）来操作Vue实例里相关的数据。差值语法和指令语法后续会详细说明；
由于Vue的双向数据绑定，Vue实例中的data数据发生变化，视图中显示它的地方也会进行一个变化（并不严谨，后续vue的数据监听处再进行详细阐述）；

1.4.2 引入Vue

引入Vue 有三种方法：

① 直接下载并本地引入，Vue 会被注册为一个全局变量。

② CDN引入。 Vue与React对比(基础篇) ：一、Hello World

③ 利用vue-cli 脚手架进行生成Vue项目

vue create my-vue-project

1.4.3 代码部分(注意看注释)

为使用方便，我在此处通过CDN来引入Vue。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>初识Vue</title>

    <!-- 首先引入Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>

  </head>
  <body>

    <!--2. 准备好一个承接vue实例控制的容器 -->
    <div id="demo">
      
      <!--4. 利用差值语法，在容器内获取vue实例上的数据并展示 -->
      <h1>{{ printData }}</h1>
    </div>

    <script type="text/javascript" >
      // 1. 创建Vue实例
      new Vue({
        el: '#demo',	// el属性用于指定当前Vue实例对哪个容器进行操作
        data: { 			// 3. data中用于存储数据，数据供el所指定的容器去使用
          printData: 'hello-vue-world'
        }
      })
    </script>
  </body>
</html>

二、React 初识

2.1 React的定义

React 是一套用于构建用户界面的渐进式框架，由Facebook团队开发并维护。

中文官网：react.docschina.org

英文官网：reactjs.org/

2.2 React 的特点

1、声明式设计

声明式编程是目前整个大前端开发的模式:Vue、React、Flutter、Swift；

它允许我们只需要维护自己的状态,当状态改变时,React可以根据最新的状态去渲染我们的UI界面。不需要直接去控制dom，你只要把数据操作好，react自己会去帮你操作dom，可以节省很多操作dom的代码。这就是声明式开发；

2、使用JSX语法

JSX 是 JavaScript 语法的扩展。React 开发大部分使用 JSX 语法（在JSX中可以将HTML于JS混写）；

3、使用虚拟DOM、高效

虚拟DOM其实质是一个JavaScript对象，当数据和状态发生了变化，都会被自动高效的同步到虚拟DOM中， 最后再将仅变化的部分同步到DOM中（不需要整个DOM树重新渲染）。

4、组件化开发

通过 React 构建组件，将复杂界面拆分成一个个小的组件，使得代码更加容易得到复用和维护，能够很好的应用在大项目的开发中。

5、单向数据流

react是单向数据流，父组件传递给子组件的数据，子组件能够使用，但是不能直接通过this.props修改。这样让数据清晰代码容易维护。

2.3 React 周边生态

create-react-app : 快速搭建基于 webpack 的 React 项目的脚手架。
React.js devtools : 用于调试 React.js 项目的浏览器 devtools 扩展插件。
react-router：React 的官方前端路由解决方案。
Redux : 是 JavaScript 应用程序的可预测状态管理容器。
redux-thunk : redux的中间件。
react-dnd： React 的拖拽库。
React-Hook-Form : 用于表单状态管理和验证的第三方表单库。
antd：企业级 UI 设计语言和 React UI 库.

2.4 helloReactWorld

同样的，这一par我们分别用React的类写法和函数写法来写下第一行React代码 “helloReactWorld”。

1.4.1 前置知识

使用React之前我们也需要了解几个前置知识：

React是通过ReactDom.render() 将我们要渲染的内容渲染到挂载对象上去的。（补充：ReactDOM.render的一个参数是要渲染的内容，第二个参数是挂载的对象）。
我们在开发React项目时用的是JSX语法，需要注意的是 JSX只是Js的一种语法拓展，其最终也是经babel转成js代码。并且，JSX并不是React的专属，在Vue里也可以使用JSX语法。
类写法和函数写法都需要 return 出我们想要渲染的内容。不同的是，类写法的是在render函数中返回的；而函数式写法直接return。
我们在return出去的JSX里可以用{ ××× } 的形式来获取react里的数据。
React并不主动的去进行双向数据绑定，react视图层的更新条件是组件的 props 或者 state 进行了改变。

1.4.2 引入React

使用React 必须要引入三个依赖：

1. react: 包含react所必须的核心代码；

2. react-dom: react渲染在不同平台所需要的核心代码；

3. babel: 将jsx转换成 React 代码的工具；

看到这里，肯定很多人会有疑惑：我们在用Vue时直接引入一个vue.js 即可，为什么React需要依赖三个库？

解释：React引入的这三个库是各司其职的,目前就是让每个库单纯做自己的事情。 (1) react包中是涵盖了react和 react-native所共同拥有的核心代码。 (2) react-dom 里则是针对web和native完成不同的事情：在web端会 jsx 最终渲染成真实的DOM 显示在浏览器中；而在native端则会将 jsx 最终渲染成原生的控件 (比如Android中的Button,IOS中的UButton) (3) babel则是将我们写的JSX语法转换成浏览器支持的Es5。

引入方式：

① 下载后，在本地引入

  <script src="../react/react.development.js"></script>
  <script src="../react/react-dom.development.js"></script>
  <script src="../react/babel.min.js"></script>

② CDN引入。

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

这是在开发环境进行引入的未压缩的， @18代表当前react的版本号

③ 利用 creat-react-app 脚手架进行生成react项目

creat-react-app  my-react-project

1.4.3 代码部分（注意看注释）

类写法版：

  <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div id="app">
  </div>

  <!-- 1. 通过CDN的方式来添加React的依赖，这里我用的是react16版的 -->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    
  
  <!-- 2. 注意事项: 我们希望jsx的代码被解析,就要在script标签里加type属性并赋值 'text/babel'  -->
  <script type="text/babel">
    // 封装App组件
    class App extends React.Component {
      constructor() {
        super();
       <!-- 3. 设置state数据  -->
        this.state = {
          message: "Hello React World"
        }
      }

      render() {
        return (
          / jsx使用规则： 必须只能有一个根节点；
          <div>
           <!-- 4. 展示state数据  -->
            {this.state.message}
          </div>
        )
      }
      }

    // 渲染组件,ReactDOM.render的一个参数是要渲染的内容，第二个参数是挂载的对象
    ReactDOM.render(<App/>, document.getElementById("app"));
  </script>


</body>

</html>

函数式写法：

  <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div id="app">
  </div>

  <!-- 1. 通过CDN的方式来添加React的依赖，这里我用的是react16版的 -->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    
  
  <!-- 2. 注意事项: 我们希望jsx的代码被解析,就要在script标签里加type属性并赋值 'text/babel'  -->
  <script type="text/babel">
    // 函数式写法封装App组件
   function App (props){
       <!-- 3. 设置state数据  -->
      const [message,]= React.useState('Hello React World')
    
      return (
        <div>
         <!-- 4. 展示state数据  -->
            {message}
        </div>   
      )
    }
    
    // 渲染组件,ReactDOM.render的一个参数是要渲染的内容，第二个参数是挂载的对象
    ReactDOM.render(<App/>, document.getElementById("app"));
  </script>


</body>

</html>

三、对比总结

1、怎么和容器进行联系：

Vue 通过全局的vue实例来对容器内容进行操作；而React则是通过ReactDOM.render方法将我们的渲染内容挂载目标对象上从而来进行一些逻辑操作。

2、更新视图差别：

Vue的双向数据绑定会自动监听data数据变化，并且会根据变化来进行相应视图层面的更新；而React中只有在props和state发生变化时，才会触发rerender，从而进行视图层的更新。

3、引入依赖的差别：

Vue 中我们只需要引入vue 这一个依赖库即可；而在React中我们需要引入 react、 react-dom 、babel 三个依赖库。

4、react类写法和函数写法的不同：

React中的类写法我们是在render函数中进行return出我们要渲染的内容，并且类中我们需要关注this的指向问题；而React的函数写法则是直接return，并且由于其并无实例，所以我们不需要关注this指向。

Vue与React对比(基础篇) ： 一、Hello World

一、Vue 初识

1.1 Vue的定义

1.2 Vue 的特点

1.3 Vue 周边生态

1.4 helloVueWorld

1.4.1 前置知识

1.4.2 引入Vue

1.4.3 代码部分(注意看注释)

二、React 初识

2.1 React的定义

2.2 React 的特点

2.3 React 周边生态

2.4 helloReactWorld

1.4.1 前置知识

1.4.2 引入React

1.4.3 代码部分（注意看注释）

三、对比总结

Vue与React对比(基础篇) ：一、Hello World