likes
comments
collection
share

Vue vs React: 框架之战，谁是前端开发的王者？

作者站长头像
站长
· 阅读数 24

前言

Vue和React作为两大主流前端框架，各有特色和优势，那么它们区别在哪呢？

架构与设计理念

  • Vue：是一个渐进式框架，允许开发者逐步采用其特性。它结合了声明式渲染、组件系统以及可选的路由和状态管理，提供了一套全面的解决方案。
  • React：更像一个库，专注于视图层，强调组件化的开发思想，要求开发者自行选择或构建状态管理、路由等附加功能的解决方案。

模板与语法

  • Vue：使用基于HTML的模板语法，允许开发者在HTML中直接嵌入指令来操作数据，使得模板更接近常规的HTML结构。
  • React：采用JSX，一种将HTML样式的语法与JavaScript相结合的书写方式，使得逻辑和模板可以在同一个文件内紧密协作。

生态系统

  • React：拥有庞大的生态系统，包括Redux、React Router、Material-UI等丰富的第三方库和工具，能满足各种开发需求。
  • Vue：虽然生态系统相对较小，但仍在迅速增长，Vuex、Vue Router、Vuetify等也为开发者提供了强大的支持。

Vue以其简洁性和易上手著称，适合快速开发中小型项目。而React因其灵活性和强大的生态系统，更适合大型应用或那些需要高度定制化的项目。

正文

创建方式

vue

在终端输入： npm create vue@latest，输入你想创建的项目名称即可

Vue vs React: 框架之战，谁是前端开发的王者？

react

  • 全局安装脚手架npm install -g create-react-app
  • npm config ls 用来查看安装地址prefix
  • create-react-app --version 查看安装的版本来检查是否成功安装 - create-react-app xxx创建名字为xxx的项目

运行方式

vue

终端输入： npm run dev

react

终端输入： npm run start

下面通过一个小demo来介绍一下react，前后很多篇文章有介绍过vue的小demo，这里就不介绍啦：

  • src 开发目录
  • src/index.js 入口文件
  • public/index.html 首页

通过react来实现下面的效果：

Vue vs React: 框架之战，谁是前端开发的王者？

index.js

  • 导入React和ReactDOM库以及自定义的App组件。
  • 创建React根容器:通过const root = ReactDOM.createRoot(document.getElementById('root'));创建了React的根容器（root）：
  1. createRoot函数接收一个DOM元素作为参数，通过document.getElementById('root')获取页面中ID为root的元素，这个元素就是React应用将要挂载（render）的地方。
  2. 在public文件夹中的index.html文件中，有一个<div id="root"></div>作为React应用的入口。
  • 渲染React组件:通过root.render(<div><App name = 'ltt'/></div>);：将React组件渲染到之前创建的根容器中，并给App组件传递了一个名为name的属性，在App组件内部可以通过props.name访问到这个值。
import ReactDOM from 'react-dom/client';
import React from 'react';
import App from './App';

// 根节点 VUE/React 功能的挂载点
// react 在哪个范围生效
const root = ReactDOM.createRoot(
  document.getElementById('root')
);

root.render(<div>
  <App name = 'ltt'/>
</div>)

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <div id="root">
      
    </div>
  </body>
</html>
  • 新建文件夹components，里面新建一个文件AppHeader.jsx，来实现组件在App.js的渲染：

AppHeader.jsx

  • 导入Component
  • 定义组件类:通过class AppHeader extends Component { ... } 定义了一个名为AppHeader的类，该类继承自Component，也就是AppHeader可以利用React组件的所有特性，如生命周期方法、状态(state)管理等
  • 构造函数constructor:
  1. 通过 constructor(props) {...} 初始化组件类，接受props作为参数，并通过super(props)调用基类的构造函数来初始化组件。
  2. 在构造函数内部，通过this.state = { emoji: '😎' };设置了组件的初始状态（state），其中emoji的初始值为'😎'。

  • 设置一个定时器(setInterval):通过setInterval(() => { ... }, 2000) 在组件的构造函数内部设置了一个定时器，每2秒执行一次回调函数：通过setState方法更新组件的状态，使得emoji在'😎'、'😂'、'😊'之间轮换。

  • render方法:

  1. render() { ... } 是React组件中必须定义的一个方法，用于返回描述组件UI的React元素。
  2. 首先通过解构赋值从props和state中获取name和emoji。
  3. 然后返回一个包含标题<h1>的React元素，标题内容由传入的name属性和组件自身状态中的emoji组成。
  • 导出组件:通过export default AppHeader;导出AppHeader组件，使其他模块能够导入并使用。
import { Component } from 'react';

class AppHeader extends Component {
    constructor(props) {
        super(props);
        // 自有状态
        this.state = { 
           emoji: '😎'
         }
   
    setInterval(() => {
        this.setState({
            emoji: this.state.emoji === '😎' ? '😂' : '😊'
        })
    }, 2000)
 }
    render() {
        const { name } = this.props;
        const { emoji } = this.state;

        return (
            <header className="app-header">
              <h1 className="title">类式组件{name} {emoji}</h1>
             </header>
        )
    }
}

export default AppHeader;

App.css

.container{
  background-color: #bfa;
}

App.js

import './App.css';
import AppHeader from '../src/components/AppHeader';

// 函数组件
// 返回JSX的才是组件
const App = (props) => {
  // const name = '椰汁波波';
  const { name } = props;

  return (
      <AppHeader name = {name} />
      
    </div>
  );
}

export default App;

结语

通过上面的小demo可以发现，对于react，是将html写在js中的，返回JSX函数就是组件。

Vue vs React: 框架之战，谁是前端开发的王者？

转载自:https://juejin.cn/post/7385728319738069032
评论
请登录