前言
在昨天我们学习了Vue基础的工程化思想和组件,今天我们来对比学习一下React,看看他们有什么相同点,有什么区别。
react repos
我们用一个例子来展开今天react的学习,跟昨天一样,我们要用到前端的基建工具vite
,所以我们在根目录下运行:
npm init vite
安装完成后,我们给项目取名为react-repos
,选择框架为React
,语言JavaScript
,ok我们项目的根目录就有了。
其实React和Vue作为最流行的两个前端框架,他们的构建思想是非常相似的,在Vue
中,我们的组件放在.vue
后缀的文件夹中,而React
呢?此时我们打开根目录下src
开发目录,会发现除了.css
后缀的文件外,还有.jsx
后缀的,没错我们React
的组件就放在.jsx
中。
//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
。
// 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
中,所以我们创建一个文件夹来存放他们两个文件。
// 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 的理念更为纯粹,提供了更大的灵活性。