1. React 概述

1.1 什么是 React

React是一个用于构建用户界面的js库
用户界面：HTML页面
React主要用来写HTML页面，或构建Web应用
如果从MVC的角度来看，React只负责视图渲染（视图层V），没有提供完整的M和C功能
React 起源于 Facebook 的内部项目，后又用来架设 Instagram 的网站，并于2013年5月开源

创建react项目

1. 最常用create-react-app

create-react-app：最常见的react脚手架，基于webpack，集成了多个常用插件如eslint、axios等

例：创建一个名为my-app的项目npx create-react-app my-app

2. vite

随着vite的火热，越来越多的人尝试使用vite创建react，它最大的特点就是快，并且干净，但也缺少create-react-app集成的多个插件，适合配置脚手架能力强的开发者。

使用：安装vite之后执行命令：npm init @vitejs/app然后输入项目名，选择配置。

2.1 在vite上安装基础eslint

这里安装的是create-react-app的同款基础版eslint，命令如下：

使用npm或yarn安装eslint-config-react-app
在package.json中增加配置：

"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  }

2.2 vite运行完代码自动打开网页

在vite.config.js中增加以下配置，server.open接收字符串和布尔值，如果是字符串就生成对应的url

server: {
    open: true, // 运行完成自动打开
  }

2.3 常用依赖package.json

"dependencies": {
    "axios": "^0.27.2",
    "eslint-config-react-app": "^7.0.1",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-router-dom": "^6.3.0"
  },

React-router

核心组件-BrowerRouter和HashRouter

包裹整个应用，一个React应用只需要用一次（一般在App里）

两种常用Router：HashRouter和BrowerRouter

哈希：使用URL的哈希值实现（和锚点技术有关），兼容性好（现在一般不使用ie，可以忽略兼容问题）

history:使用h5的history.pushState API实现，需要后端配合

核心组件-Link

用于指定导航链接，完成路由跳转，渲染后是a链接

<Link to='/path'>页面一</Link>

Routes

提供一个路由出口，满足条件的路由组件会渲染到组件内部

当中哪个满足条件，哪个就会渲染到Routes上

 <Routes >
    <Route path='/' element={<Home />} />
    <Route path='/about' element={<About />} />
 </Routes>

Route

用于指定导航链接，完成路由跳转

path属性指定匹配的路径地址，element属性指定要渲染的组件

    <Route path='/' element={<Home />} />

当url路径为'/about'时，会渲染

编程式导航-跳转

（应该类似vueRouter里的router.push()）

通过js编程的方式进行路由页面跳转，比如从登录页跳转到关于页

import React from 'react'
import { useNavigate } from 'react-router-dom'

export default function About() {
    const navigate = useNavigate()
    const getHome = () => {
        // replace可以使跳转时不添加历史记录，点击后退不会返回
        navigate('/', { replace: true })
    }
    return (
        <div>
            <h3>About</h3>
            <button onClick={getHome}>跳转到首页</button>
        </div>
    )
}

语法：

导入useNavigate钩子函数
执行钩子函数得到跳转函数
执行跳转函数完成跳转

注意：如果在跳转时不想加历史记录，可以添加额外参数replace为true

跳转携带参数

searchParams传参

不用在路由组件中配置
使用useSearchParams hook来访问查询参数。其用法和useState类似，会返回当前对象和更改它的方法
更改searchParams时，必须传入所有的查询参数，否则会覆盖已有参数

传参:

navigate('/about?id=1001&name=lisi')

取参：

let [params] = useSearchParams()
let id = params.get('id')

params传参

在Route组件中的path属性中定义路径参数
在组件内通过useParams hook访问路径参数

用法：


<BrowserRouter>
    <Routes>
        <Route path='/foo/:id' element={Foo} />
    </Routes>
</BrowserRouter>

import { useParams } from 'react-router-dom';
export default function Foo(){
    const params = useParams();
    return (
        <div>
            <h1>{params.id}</h1>
        </div>
    )
}

嵌套路由

通过嵌套<Route></Route>来实现

<Route path='/about' element={<About />} >
  <Route path='child' element={<Child />} />
  <Route path='childTwo' element={<ChildTwo />} />
</Route>

在父组件中使用Outlet来显示匹配到的子组件

import React from 'react'
import { Outlet, Link } from 'react-router-dom'

export default function About() {
    return (
        <div>
            <Link to='/about/child' className='link-item'>child</Link>
            <Link to='/about/childTwo' className='link-item'>childTwo</Link>
            <Outlet />
        </div>
    )
}

默认二级路由

在嵌套路由中，可以如果url仅匹配到父级url，则Outlet中会显示带有index属性的路由，此路由不能有path属性，否则index不生效

<Route path='/about' element={<About />} >
  <Route path='child' element={<Child />} />
  <Route index element={<ChildTwo />} />
</Route>

404路由

全匹配路由，在各级路由的最后添加path值为*号的路由

 <Route path='*' element={<h2>找不到你想访问的资源</h2>} />

重定向

当在某个路径/a下，要重定向到路径/b时，可以通过Navigate组件进行重定向到其他路径

等价于以前版本中的Redirect组件

import { Navigate } from 'react-router-dom';
function A(){
    return (
        <Navigate to="/b" />
    )
}

【学习笔记】React