ReactRouter

前置

在一開始前端開發(fā)都是單頁(yè)應(yīng)用，也就是只有一個(gè)html文件。后來主流的開發(fā)模式變成了通過路由進(jìn)行頁(yè)面切換。這樣做的優(yōu)勢(shì)就是：避免整體頁(yè)面刷新 用戶體驗(yàn)變好。缺點(diǎn)就是：前端負(fù)責(zé)事情變多了 開發(fā)的難度變大。

路由的本質(zhì)是什么？

路由的概念來源于后端 : 一個(gè)路徑表示匹配一個(gè)服務(wù)器資源，例如：

• /a.html -> a對(duì)應(yīng)的文件資源
• /b.html -> b對(duì)應(yīng)的文件資源

共同的思想: 一對(duì)一的關(guān)系

前端的路由: 一個(gè)路徑path對(duì)應(yīng)唯一的一個(gè)組件comonent 當(dāng)我們?cè)L問一個(gè)path 自動(dòng)把path對(duì)應(yīng)的組件進(jìn)行渲染

const routes = [{path:'/home',component: Home},{path:'/about',component: About},{path:'/article',component: Article}
]

基本使用

首先安裝依賴：

yarn add react-router-dom@6

我們以一個(gè)小案例為例：

需求: 準(zhǔn)備倆個(gè)按鈕，點(diǎn)擊不同按鈕切換不同組件內(nèi)容的顯示

實(shí)現(xiàn)步驟：

1. 導(dǎo)入必要的路由router內(nèi)置組件
2. 準(zhǔn)備倆個(gè)React組件
3. 按照路由的規(guī)則進(jìn)行路由配置

// 引入必要的內(nèi)置組件
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'// 準(zhǔn)備倆個(gè)路由組件const Home = () => <div>this is home</div>
const About = () => <div>this is about</div>function App() {return (<div className="App">{/* 按照規(guī)則配置路由，是一個(gè)非hash模式的路由 */}<BrowserRouter>{/* 指定跳轉(zhuǎn)的組件，to用來配置路由地址 */}<Link to="/">首頁(yè)</Link><Link to="/about">關(guān)于</Link><Routes><Route path="/" element={<Home />}></Route><Route path="/about" element={<About />}></Route></Routes></BrowserRouter></div>)
}export default App

核心內(nèi)置組件說明

BrowerRouter組件

作用: 包裹整個(gè)應(yīng)用，一個(gè)React應(yīng)用只需要使用一次

Hash路由和history路由是兩種前端路由的實(shí)現(xiàn)方式，它們的區(qū)別主要有以下幾點(diǎn)：

• Hash路由是一種把前端路由的路徑用井號(hào) # 拼接在真實(shí) URL 后面的模式。當(dāng)井號(hào) # 后面的路徑發(fā)生變化時(shí)，瀏覽器并不會(huì)向服務(wù)器發(fā)送請(qǐng)求，而是根據(jù) hash 值的變化來更新頁(yè)面內(nèi)容。
• History路由是一種利用 HTML5 的 history API 來實(shí)現(xiàn)的路由模式。它可以通過 pushState 和 replaceState 方法來修改瀏覽器的歷史記錄，從而改變 URL 的顯示，同時(shí)不會(huì)觸發(fā)頁(yè)面的刷新。
• Hash路由相比于 history 路由，有以下幾個(gè)缺點(diǎn)：
  • Hash路由的 URL 較丑，有一個(gè)多余的 # 符號(hào)。
  • Hash路由原本是用來做頁(yè)面定位的，如果用來做路由的話，原來的錨點(diǎn)功能就不能用了。
  • Hash路由的傳參是基于 URL 的，如果要傳遞復(fù)雜的數(shù)據(jù)，會(huì)有體積的限制，而 history 路由不僅可以在 URL 里放參數(shù)，還可以將數(shù)據(jù)存放在一個(gè)特定的對(duì)象中。
  • Hash路由設(shè)置的新值必須與原來不一樣才會(huì)觸發(fā)記錄添加到棧中，而 history 路由可以設(shè)置與當(dāng)前 URL 一模一樣的新 URL，這樣也會(huì)把記錄添加到棧中。

Link組件

作用: 用于指定導(dǎo)航鏈接，完成聲明式的路由跳轉(zhuǎn) 類似于 <router-link/>

這里to屬性用于指定路由地址，表示要跳轉(zhuǎn)到哪里去，Link組件最終會(huì)被渲染為原生的a鏈接

Routes組件

作用: 提供一個(gè)路由出口，組件內(nèi)部會(huì)存在多個(gè)內(nèi)置的Route組件，滿足條件的路由會(huì)被渲染到組件內(nèi)部

什么是路由出口？
路由出口是一個(gè)用于在頁(yè)面中顯示路由組件的標(biāo)簽，它可以讓你在不同的位置展示不同的內(nèi)容，根據(jù)路由的變化而變化。路由出口有以下幾個(gè)特點(diǎn)：

• 你可以在一個(gè)頁(yè)面中使用多個(gè)路由出口，只要給它們不同的名字，就可以實(shí)現(xiàn)復(fù)雜的布局效果。
• 你可以在路由出口中嵌套其他的路由出口，以實(shí)現(xiàn)多級(jí)的路由導(dǎo)航。
• 你可以在路由出口中使用路由守衛(wèi)，以實(shí)現(xiàn)對(duì)路由的控制和攔截。

Route組件

作用: 用于定義路由路徑和渲染組件的對(duì)應(yīng)關(guān)系 [element：因?yàn)閞eact體系內(nèi)把組件叫做react element]

其中path屬性用來指定匹配的路徑地址，element屬性指定要渲染的組件，圖中配置的意思為: 當(dāng)url上訪問的地址為 /about 時(shí)，當(dāng)前路由發(fā)生匹配，對(duì)應(yīng)的About組件渲染

編程式導(dǎo)航

聲明式 【 Link to】 vs 編程式 【調(diào)用路由方法進(jìn)行路由跳轉(zhuǎn)】

概念: 通過js編程的方式進(jìn)行路由頁(yè)面跳轉(zhuǎn)，比如說從首頁(yè)跳轉(zhuǎn)到關(guān)于頁(yè)

實(shí)現(xiàn)步驟：

1. 導(dǎo)入一個(gè) useNavigate 鉤子函數(shù)
2. 執(zhí)行 useNavigate 函數(shù) 得到 跳轉(zhuǎn)函數(shù)
3. 在事件中執(zhí)行跳轉(zhuǎn)函數(shù)完成路由跳轉(zhuǎn)

// 導(dǎo)入useNavigate函數(shù)
import { useNavigate } from 'react-router-dom'
const Home = () => {// 執(zhí)行函數(shù)const navigate = useNavigate()return (<div>Home<button onClick={ ()=> navigate('/about') }> 跳轉(zhuǎn)關(guān)于頁(yè) </button></div>)
}export default Home

注: 如果在跳轉(zhuǎn)時(shí)不想添加歷史記錄，可以添加額外參數(shù)replace 為true

navigate('/about', { replace: true } )

路由傳參

場(chǎng)景：跳轉(zhuǎn)路由的同時(shí)，有時(shí)候要需要傳遞參數(shù)

searchParams傳參

路由傳參

路由取參

params傳參

路由傳參

在指定路由的時(shí)候，要先占個(gè)位！

路由取參

嵌套路由

場(chǎng)景：在我們做的很多的管理后臺(tái)系統(tǒng)中，通常我們都會(huì)設(shè)計(jì)一個(gè)Layout組件，在它內(nèi)部實(shí)現(xiàn)嵌套路由

實(shí)現(xiàn)步驟：

1. App.js中定義嵌套路由聲明

<Routes><Route path="/"  element={<Layout/>}><Route path="board" element={ <Board/> } /><Route path="article" element={ <Article/> } /></Route>{ /* 省略部分  */ }
</Routes>

2. Layout組件內(nèi)部通過 <Outlet/> 指定二級(jí)路由出口

import { Outlet } from 'react-router-dom'const Layout = () => {return (<div>layout{ /* 二級(jí)路由的path等于 一級(jí)path + 二級(jí)path  */ }<Link to="/board">board</Link><Link to="/article">article</Link>{ /* 二級(jí)路由出口 */ }<Outlet/></div>)
}
export default Layout

默認(rèn)二級(jí)路由

場(chǎng)景: 應(yīng)用首次渲染完畢就需要顯示的二級(jí)路由

實(shí)現(xiàn)步驟:

1. 給默認(rèn)二級(jí)路由標(biāo)記index屬性
2. 把原本的路徑path屬性去掉

代碼實(shí)現(xiàn)：

<Routes><Route path="/"  element={<Layout/>}><Route index element={ <Board/> } /><Route path="article" element={ <Article/> } /></Route>
</Routes>

import { Outlet } from 'react-router-dom'const Layout = () => {return (<div>layout{ /* 默認(rèn)二級(jí)不再具有自己的路徑  */ }<Link to="/">board</Link><Link to="/article">article</Link>{ /* 二級(jí)路由出口 */ }<Outlet/></div>)
}

404路由配置

場(chǎng)景：當(dāng)url的路徑在整個(gè)路由配置中都找不到對(duì)應(yīng)的path，使用404兜底組件進(jìn)行渲染

首先我們準(zhǔn)備一個(gè)NotFound組件

const NotFound = () => {return <div>this is NotFound</div>
}export default NotFound

然后將這個(gè)組件添加到聲明當(dāng)中的，作為兜底方法

<BrowserRouter><Routes><Route path="/" element={<Layout />}><Route index element={<Board />} /><Route path="article" element={<Article />} /></Route><Route path="*" element={<NotFound />}></Route></Routes>
</BrowserRouter>

集中式路由配置

場(chǎng)景: 當(dāng)我們需要路由權(quán)限控制點(diǎn)時(shí)候, 對(duì)路由數(shù)組做一些權(quán)限的篩選過濾，所謂的集中式路由配置就是用一個(gè)數(shù)組統(tǒng)一把所有的路由對(duì)應(yīng)關(guān)系寫好，替換本來的Routes組件

import { BrowserRouter, Routes, Route, useRoutes } from 'react-router-dom'import Layout from './pages/Layout'
import Board from './pages/Board'
import Article from './pages/Article'
import NotFound from './pages/NotFound'// 1. 準(zhǔn)備一個(gè)路由數(shù)組 數(shù)組中定義所有的路由對(duì)應(yīng)關(guān)系
const routesList = [{path: '/',element: <Layout />,children: [{element: <Board />,index: true, // index設(shè)置為true 變成默認(rèn)的二級(jí)路由},{path: 'article',element: <Article />,},],},// 增加n個(gè)路由對(duì)應(yīng)關(guān)系{path: '*',element: <NotFound />,},
]// 2. 使用useRoutes方法傳入routesList生成Routes組件
function WrapperRoutes() {let element = useRoutes(routesList)return element
}function App() {return (<div className="App"><BrowserRouter>{/* 3. 替換之前的Routes組件 */}<WrapperRoutes /></BrowserRouter></div>)
}export default App

Mobx

什么是Mobx

一個(gè)可以和React良好配合的集中狀態(tài)管理工具，和Redux解決的問題相似，都可以獨(dú)立組件進(jìn)行集中狀態(tài)管理

mobx和react的關(guān)系，相當(dāng)于vuex和vue

同類工具還有：

• redux
• dva
• recoil

優(yōu)勢(shì)：

1. 簡(jiǎn)單：編寫無(wú)模板的極簡(jiǎn)代碼精準(zhǔn)描述你的意圖
2. 輕松實(shí)現(xiàn)最優(yōu)渲染：依賴自動(dòng)追蹤，實(shí)現(xiàn)最小渲染優(yōu)化
3. 架構(gòu)自由：可移植, 可測(cè)試 無(wú)特殊心智負(fù)擔(dān)

環(huán)境配置

Mobx是一個(gè)獨(dú)立的響應(yīng)式的庫(kù)，可以獨(dú)立于任何UI框架存在，但是通常大家習(xí)慣把它和React進(jìn)行綁定使用，用Mobx來做響應(yīng)式數(shù)據(jù)建模，React作為UI視圖框架渲染內(nèi)容，我們環(huán)境的配置需要三個(gè)部分

1. 一個(gè)create-react-app創(chuàng)建好的React項(xiàng)目環(huán)境
2. mobx框架本身
3. 一個(gè)用來鏈接mobx和React的中間件

# 安裝mobx和中間件工具 mobx-react-lite  只能函數(shù)組件中使用
$ yarn add  mobx  mobx-react-lite

基礎(chǔ)使用

需求: 使用mobx實(shí)現(xiàn)一個(gè)計(jì)數(shù)器的案例

首先我們初始化mobx：

一般我們mobx的代碼會(huì)寫在store文件夾中：

初始化步驟

1. 定義數(shù)據(jù)狀態(tài)state
2. 在構(gòu)造器中實(shí)現(xiàn)數(shù)據(jù)響應(yīng)式處理 makeAutoObservble
3. 定義修改數(shù)據(jù)的函數(shù)action
4. 實(shí)例化store并導(dǎo)出

import { makeAutoObservable } from 'mobx'class CounterStore {count = 0 // 定義數(shù)據(jù)constructor() {makeAutoObservable(this)  // 響應(yīng)式處理}// 定義修改數(shù)據(jù)的方法addCount = () => {this.count++}
}const counter = new CounterStore()
export default counter

然后React使用store：

實(shí)現(xiàn)步驟

1. 在組件中導(dǎo)入counterStore實(shí)例對(duì)象
2. 在組件中使用storeStore實(shí)例對(duì)象中的數(shù)據(jù)
3. 通過事件調(diào)用修改數(shù)據(jù)的方法修改store中的數(shù)據(jù)
4. 讓組件響應(yīng)數(shù)據(jù)變化

// 導(dǎo)入counterStore
import counterStore from './store'
// 導(dǎo)入中間件連接mobx、react 完成響應(yīng)式變化
import { observer } from 'mobx-react-lite'
function App() {return (<div className="App"><button onClick={() => counterStore.addCount()}>{counterStore.count}</button></div>)
}
// 包裹組件讓視圖響應(yīng)數(shù)據(jù)變化
export default observer(App)

在原來我們的數(shù)據(jù)是react來管理的，所以數(shù)據(jù)的變化會(huì)引起模板的重新渲染，而現(xiàn)在我們將狀態(tài)交給mobx來管理，并且改變狀態(tài)的方法也是mobx中提供的，所以我們需要observer方法來包裹App跟組件，讓視圖響應(yīng)數(shù)據(jù)變化。

observer函數(shù)*

observer函數(shù)是一個(gè)高階組件（Higher-Order Component，HOC），它可以接收一個(gè)React組件作為參數(shù)，并返回一個(gè)新的React組件，這個(gè)新的組件會(huì)自動(dòng)訂閱Mobx中的可觀察數(shù)據(jù)，并在數(shù)據(jù)變化時(shí)重新渲染。

observer函數(shù)應(yīng)該包裹那些需要響應(yīng)Mobx中的數(shù)據(jù)變化的組件，通常是那些展示數(shù)據(jù)或者處理用戶交互的組件。

我們可能會(huì)有一種猜想，我們直接使用observer函數(shù)包裹最外層的組件App是不是就可以了？這樣當(dāng)App組件重新渲染的時(shí)候，也會(huì)把子組件連帶著一起重新渲染了？

這種想法大錯(cuò)特錯(cuò)！

App組件重新渲染了，子組件也不一定會(huì)重新渲染，這取決于子組件是否接收了來自App組件的props，以及這些props是否發(fā)生了變化。子組件只有在它的props或者state發(fā)生變化時(shí)，才會(huì)重新渲染。如果子組件只是依賴于Mobx中的數(shù)據(jù)，而不是App組件傳遞的props，那么它就不會(huì)因?yàn)锳pp組件的重新渲染而重新渲染，除非它也使用了observer函數(shù)來訂閱Mobx中的數(shù)據(jù)。子組件包含在App組件中，只是表示它是App組件的子節(jié)點(diǎn)，它并不會(huì)自動(dòng)繼承App組件的props或者響應(yīng)App組件的更新。你可以把這個(gè)過程想象成一個(gè)樹形結(jié)構(gòu)，每個(gè)組件都是一個(gè)節(jié)點(diǎn)，每個(gè)節(jié)點(diǎn)都有自己的數(shù)據(jù)和渲染邏輯，只有當(dāng)節(jié)點(diǎn)的數(shù)據(jù)發(fā)生變化時(shí)，它才會(huì)重新渲染自己和它的子節(jié)點(diǎn)。

如果你想讓子組件跟隨App組件的更新而更新，你可以有以下幾種方法：

• 在App組件中使用observer函數(shù)，并且把Mobx中的數(shù)據(jù)通過props傳遞給子組件，這樣子組件就會(huì)根據(jù)props的變化而重新渲染。
• 在子組件中也使用observer函數(shù)，并且直接從Mobx中獲取數(shù)據(jù)，這樣子組件就會(huì)根據(jù)Mobx中的數(shù)據(jù)變化而重新渲染。
• 在App組件中使用forceUpdate方法，強(qiáng)制App組件和它的子組件重新渲染，但這種方法不推薦使用，因?yàn)樗鼤?huì)破壞React的優(yōu)化機(jī)制。

計(jì)算屬性（衍生狀態(tài)）

概念: 有一些狀態(tài)根據(jù)現(xiàn)有的狀態(tài)計(jì)算（衍生）得到，我們把這種狀態(tài)叫做計(jì)算屬性, 看下面的例子

實(shí)現(xiàn)步驟

1. 聲明一個(gè)存在的數(shù)據(jù)
2. 通過get關(guān)鍵詞 定義計(jì)算屬性
3. 在 makeAutoObservable 方法中標(biāo)記計(jì)算屬性（其實(shí)標(biāo)記不標(biāo)記都可以，只是為了可讀性）

import { computed, makeAutoObservable } from 'mobx'class CounterStore {list = [1, 2, 3, 4, 5, 6]constructor() {makeAutoObservable(this, {filterList: computed})}// 修改原數(shù)組changeList = () => {this.list.push(7, 8, 9)}// 定義計(jì)算屬性get filterList () {return this.list.filter(item => item > 4)}
}const counter = new CounterStore()export default counter

get使用來表明getter方法的關(guān)鍵字

// 導(dǎo)入counterStore
import counterStore from './store'
// 導(dǎo)入observer方法
import { observer } from 'mobx-react-lite'
function App() {return (<div className="App">{/* 原數(shù)組 */}{JSON.stringify(counterStore.list)}{/* 計(jì)算屬性 */}{JSON.stringify(counterStore.filterList)}<button onClick={() => counterStore.changeList()}>change list</button></div>)
}
// 包裹組件讓視圖響應(yīng)數(shù)據(jù)變化
export default observer(App)

異步數(shù)據(jù)處理

實(shí)現(xiàn)步驟:

1. 在mobx中編寫異步請(qǐng)求方法 獲取數(shù)據(jù) 存入state中
2. 組件中通過 useEffect + 空依賴 觸發(fā)action函數(shù)的執(zhí)行

// 異步的獲取import { makeAutoObservable } from 'mobx'
import axios from 'axios'class ChannelStore {channelList = []constructor() {makeAutoObservable(this)}// 只要調(diào)用這個(gè)方法 就可以從后端拿到數(shù)據(jù)并且存入channelListsetChannelList = async () => {const res = await axios.get('http://geek.itheima.net/v1_0/channels')this.channelList = res.data.data.channels}
}
const channlStore = new ChannelStore()
export default channlStore

import { useEffect } from 'react'
import { useStore } from './store'
import { observer } from 'mobx-react-lite'
function App() {const { channlStore } = useStore()// 1. 使用數(shù)據(jù)渲染組件// 2. 觸發(fā)action函數(shù)發(fā)送異步請(qǐng)求useEffect(() => {channlStore.setChannelList()}, [])return (<ul>{channlStore.channelList.map((item) => (<li key={item.id}>{item.name}</li>))}</ul>)
}
// 讓組件可以響應(yīng)數(shù)據(jù)的變化[也就是數(shù)據(jù)一變組件重新渲染]
export default observer(App)

模塊化

場(chǎng)景: 一個(gè)項(xiàng)目有很多的業(yè)務(wù)模塊，我們不能把所有的代碼都寫到一起，這樣不好維護(hù)，提了提供可維護(hù)性，需要引入模塊化機(jī)制

實(shí)現(xiàn)步驟

1. 拆分模塊js文件，每個(gè)模塊中定義自己獨(dú)立的state/action
2. 在store/index.js中導(dǎo)入拆分之后的模塊，進(jìn)行模塊組合
3. 利用React的context的機(jī)制導(dǎo)出統(tǒng)一的useStore方法，給業(yè)務(wù)組件使用。（當(dāng)然也可以直接導(dǎo)出，使用context導(dǎo)出的好處就是調(diào)試+依賴注入）

store/taskStore.js：

import { makeAutoObservable } from 'mobx'class TaskStore {taskList = []constructor() {makeAutoObservable(this)}addTask () {this.taskList.push('vue', 'react')}
}const task = new TaskStore()export default task

store/counterStore.js：

import { makeAutoObservable } from 'mobx'class CounterStore {count = 0list = [1, 2, 3, 4, 5, 6]constructor() {makeAutoObservable(this)}addCount = () => {this.count++}changeList = () => {this.list.push(7, 8, 9)}get filterList () {return this.list.filter(item => item > 4)}
}const counter = new CounterStore()export default counter

組合模塊導(dǎo)出統(tǒng)一方法：

index.js

import React from 'react'import counter from './counterStore'
import task from './taskStore'class RootStore {constructor() {this.counterStore = counterthis.taskStore = task}
}const rootStore = new RootStore()// context機(jī)制的數(shù)據(jù)查找鏈  Provider如果找不到 就找createContext方法執(zhí)行時(shí)傳入的參數(shù)
const context = React.createContext(rootStore)const useStore = () => React.useContext(context)
// useStore() =>  rootStore  { counterStore, taskStore }export { useStore }

這個(gè)地方直接導(dǎo)出rootstore也是可以的。

接下來我們就來使用：

import { observer } from 'mobx-react-lite'
// 導(dǎo)入方法
import { useStore } from './store'
function App() {// 得到storeconst store = useStore()//這個(gè)地方我們可以直接解構(gòu)賦值，想用哪一個(gè)就解構(gòu)哪一個(gè)，例如：//const {counterStore} = useStore()return (<div className="App"><button onClick={() => store.counterStore.addCount()}>{store.counterStore.count}</button></div>)
}
// 包裹組件讓視圖響應(yīng)數(shù)據(jù)變化
export default observer(App)

多組件數(shù)據(jù)共享

目標(biāo)：當(dāng)數(shù)據(jù)發(fā)生變化，所有用到數(shù)據(jù)的組件都會(huì)得到同步的組件的更新

實(shí)現(xiàn)步驟：在Foo組件和Bar組件中分別使用store中的數(shù)據(jù)，然后在app組件中進(jìn)行數(shù)據(jù)修改，查看Foo組件和Bar組件是否得到更新

Bar.js

// 用taskStore中的taskList數(shù)據(jù)
import { useStore } from './store'
import { observer } from 'mobx-react-lite'
const Bar = () => {const { taskStore } = useStore()return (<ul>{taskStore.taskList.map((item) => (<li>{item}</li>))}</ul>)
}export default observer(Son)

Foo.js

// 用taskStore中的taskList數(shù)據(jù)
import { useStore } from './store'
import { observer } from 'mobx-react-lite'
const Bar = () => {const { taskStore } = useStore()return (<ul>{taskStore.taskList.map((item) => (<li>{item}</li>))}</ul>)
}export default observer(Son)

App.js

import Bar from './Bar'
import Foo from './Foo'
import { useStore } from './store'
function App() {const { taskStore } = useStore()return (<div className="App"><Bar /><button onClick={() => taskStore.setTaskList('angular')}>修改taskStore</button></div>)
}
export default App

Mobx和React職責(zé)劃分

Mobx和React的職責(zé)劃分就是，Mobx負(fù)責(zé)管理應(yīng)用的狀態(tài)，React負(fù)責(zé)渲染應(yīng)用的界面。你應(yīng)該把那些需要跨組件共享或者響應(yīng)變化的數(shù)據(jù)交給Mobx維護(hù)，比如用戶的信息、購(gòu)物車的內(nèi)容、主題的設(shè)置等。你應(yīng)該把那些只和組件自身相關(guān)或者不需要響應(yīng)變化的數(shù)據(jù)交給React維護(hù)，比如表單的輸入、組件的展開狀態(tài)、動(dòng)畫的進(jìn)度等。

• 這里的業(yè)務(wù)狀態(tài)數(shù)據(jù)就類似于從后端獲得的數(shù)據(jù)，其余的我們都可以當(dāng)作UI的臨時(shí)狀態(tài)。