构建React基础及理解与Vue的区别

前言

在昨天我们学习了Vue基础的工程化思想和组件，今天我们来对比学习一下React，看看他们有什么相同点，有什么区别。

react repos

我们用一个例子来展开今天react的学习，跟昨天一样，我们要用到前端的基建工具vite，所以我们在根目录下运行:

js 复制代码

npm init vite

安装完成后，我们给项目取名为react-repos,选择框架为React,语言JavaScript，ok我们项目的根目录就有了。

其实React和Vue作为最流行的两个前端框架，他们的构建思想是非常相似的，在Vue中，我们的组件放在.vue后缀的文件夹中，而React呢？此时我们打开根目录下src开发目录，会发现除了.css后缀的文件外，还有.jsx后缀的，没错我们React的组件就放在.jsx中。

js 复制代码

//main.jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

react中将挂载点挂载到App的方式不同，在这里我们要用到getElementById，而vue中是用.mount。

js 复制代码

// App.jsx

import { useState } from 'react'
// es6 模块化的引入
import Repos from './components/repos/repos.jsx'

function App() {

return (
      <div>
        <Repos />
      </div>
  )
}

// es6 模块化的导出
export default App

React组件，它与vue的三段式完全不同 ，在.jsx文件中，函数即组件，它的函数组件必须返回一段html,它很好的继承了原生JS的语法。

在这里我们使用import和export引入和导出我们需要的模块，利用这两个语法可以实现功能的拆分，你可以将到处的组件在任意其他组件中引入。

我们所在的是组件的根目录，我们去到引入的下一层./components/repos/repos.jsx'下，有没有发现，我们不是和vue中一样，直接进入./components/下的.vue文件中，而是又嵌套了一个文件夹。

这是因为在React中，函数组件文件下是不写css的，它会单独写在一个.css文件中，在引入到.jsx中，所以我们创建一个文件夹来存放他们两个文件。

js 复制代码

// repos.jsx

import { useState } from 'react'
import './repos.css'

function Repos(){

    // 使用一个响应式数据状态
    // 初始值 返回的是一个数组 解构 数组的第一项是当前的状态，数组的第二项是修改状态的方法
    const [repos,setRepos] = useState([]) // repos 变成了响应式数据 状态
    const [loading,setLoading] = useState(true);

    fetch('https://api.github.com/users/uyu8/repos')
    .then(res => res.json()) // 二进制流 转 json 格式
    .then(data => {
        // console.log(data)
        setLoading(false);
        setRepos(data)
    })

    return(
        // html？react 发明了 JSX 语法 可以在 js 里面写 html
        // JS 
        <div className = "github-repos"> 
        <h2>Github Repositories</h2>
        {loading && <p>Loading...</p>}
        <ul>
            {
                repos.map(repo => (
                    <li key={repo.id}><a href={repo.html_url}>
                        {repo.name}</a>
                        <span>作者：{repo.owner.login}</span>
                    </li>
                ))
            }
        </ul>
        {!loading && repos.length === 0 && <p>没有repos</p>}
        </div>
    )
}

export default Repos

可以看到在代码头部我们引入了.css文件，我们上面说过，React中的函数组件返回的是html ，那么css是写在单独文件中的，那么我们的js哪去了呢？

这就是JSX语法的精妙的部分了，在代码的return部分我们可以发现它是和我们的html写在一起的 ，这种写法本身是不被允许的，但是React会去解析JSX并将其转化为原生的js，所以我们可以在js中写入html，这使我们可以在函数中方便的表达UI部分。

但是有一个很关键的点，就是你不能将标签的关键字申明写成class而要用className，这是因为 JSX 最终会被编译成 JavaScript 和 DOM 操作，而 class 在 JavaScript 中有特殊含义，所以 React 团队选择了 className 作为替代，以避免与 JavaScript 的 class 关键字冲突，并且保持与原生 HTML API 的一致性（如 element.className）。

这就是我们的组件，在vue和React中都是一样的，它是html,css,js的结合体，用来完成一件功能的拆分。

组件中除了要有静态的UI,还要有我们的动态数据，也就是响应式数据，在vue中我们直接一个ref就搞定了，在React中，我们需要引入useState。

useState 是 React 中用于在函数组件中添加状态的一个 Hook。等号右边的括号中是初始值，谁的初始值呢，是等号左边解构符中的第一个数据的初始值，useState会将它变为一个响应式数据的状态，第二项则是修改状态的方法，也就是一个函数。

状态是一种特殊的对象，它存储了组件的某些信息，并且可以在组件渲染之间保持。状态是可变的，这意味着你可以通过调用特定的方法来改变它。当状态发生变化时，React 会自动重新渲染组件，以反映最新的状态值。

在这里我们loading的初始状态为true，这时页面会显示Loading... ，当fetch从链接中拉取数据并且转换为json格式后，setLoading将loading状态设置为false，并且setRepos将repos状态由空数组变为存放拉取来的数据 ，再在return中通过数组的.map方法转变为列表格式输出。

这时我们在根目录下运行npm run dev：

我们的react repos就成功了。

总结

vue和react的相同点

都使用了组件化思想，将应用按功能分解为不同独立且可复用的组件，可以被组合成复杂的UI。
都是我们的现代前端框架，都需要一个DOM元素作为挂载点，将组件渲染到页面上。
都有工程化配套。
有着数据绑定的格式vue中是{{}}，react中是{}。
Vue 通过其响应式系统自动追踪状态变化，并更新相关的视图；React 则通过状态（State）和属性（Props）的变化触发重新渲染。不需要做DOM耗性能的操作。

区别点

Vue 组件通常以.vue结尾，而 React 组件多以.jsx或.js结尾。
Vue 使用HTML-based的模板语法，它允许你在单个文件中定义<template>、<script>和<style>三部分。 React 使用JSX，这是一种看起来像XML的JavaScript语法扩展，它允许你直接在JavaScript中编写类似HTML的代码，使UI逻辑与业务逻辑紧密结合。
Vue 的API设计较为直观，对于初学者来说更友好，容易上手 。 React 的概念可能对新手来说稍显复杂，尤其是当涉及到如钩子（Hooks）、上下文（Context）等高级特性时。然而，对于熟悉JavaScript的开发者来说，React 的理念更为纯粹，提供了更大的灵活性。