ReactRoutr6
- React Router以三個(gè)不同類型的包發(fā)布到npm上：
- react-router路由的核心庫(kù)嗜逻，提供了很多的組件、鉤子
- react-router-dom：包含react-router所有內(nèi)容操刀，并添加一些專門用于DOM的組件乒验，例如<BrowserRouter/>等
- react-router-native：包含react-router所有內(nèi)容俄认，并添加一些專門用于ReactNative的API，例如<NativeRouter/>等
- 與ReactRoutr5.x版本相比蒙揣，改變了什么靶溜？
- 內(nèi)置組件的變化：移除<Switch>，新增<Routes>等
- 語(yǔ)法的變化懒震，component={About}變?yōu)閑lement={<About/>}等
- 新增多個(gè)Hook：useParams罩息、useNavigate、useMatch等
- 官方明確推薦函數(shù)式組件８鋈拧４膳凇！
React Component
- <BrowserRouter>和<HashRouter>用法不變
- <Routes>與<Route>:
(1)v6版本移除了<Switch>递宅，引入新的替代者<Routes>
(2)<Routes>和<Route>要配合使用娘香，且必須要用<Routes>包裹<Route>
(3)<Routes>相當(dāng)于一個(gè)if語(yǔ)句，如果其路徑與當(dāng)前URL匹配办龄，則呈現(xiàn)其對(duì)應(yīng)組件
(4)<Routes caseSensitive>屬性用于指定匹配時(shí)是否區(qū)分大小寫（默認(rèn)false）
(5)<Route>可以嵌套使用烘绽，且可配合useRoutes()配置路由表，但需通過<Outlet>組件來渲染子路由<Routes> //path定義路徑俐填，element屬性用于定義當(dāng)前路徑所對(duì)應(yīng)的組件 <Route path="/about" element={<About/>}></Route> <Route path="/home" element={<Home/>}> <Route path="test" element={<Test/>}/></Route> </Route> <Route path="/" element={<Navigate to="/home" replace={false}/>}></Route> //Route也可以不寫element屬性安接，這時(shí)就可以用來展示嵌套的路由，所對(duì)應(yīng)的路徑是/users/xxx <Route path="users"> <Route pah="xxx" element={<Demo/>}><Route/> <Route/> <Route/> </Routes>- <Link>和<NavLink>用法與v5一樣英融，<NavLink>的高亮效果不再用activeClass
<NavLink className={({isActive })=>{ isActive ? 'active list-group-item' : 'list-group-item' } to="/about">About</NavLink> //默認(rèn)情況下盏檐，當(dāng)Home的子組件匹配成功，home的導(dǎo)航也會(huì)高亮 //當(dāng)NavLink 上添加end屬性后驶悟，若Home的子組件匹配成功糯笙，則home的導(dǎo)航不會(huì)高亮 <NavLink to="/home" end>Home</NavLink>
- <Link>和<NavLink>用法與v5一樣英融，<NavLink>的高亮效果不再用activeClass
- <Navigate>
(1) 只要<Navigate>組件被渲染，就會(huì)修改路徑撩银，切換視圖
(2) replace用于控制跳轉(zhuǎn)模式(push 或 replace，默認(rèn)push) - <Outlet>豺憔，當(dāng)<Route>產(chǎn)生嵌套時(shí)额获，渲染其對(duì)應(yīng)的子路由
React Hook
是什么？
- Hook是react16.8.0版本增加的新特性/新語(yǔ)法
- 可以讓你在函數(shù)組件中使用state以及其他的react特性（因函數(shù)式組件沒有this恭应，所以沒有生命周期抄邀、state等特性）
三個(gè)常用的Hook
- State hook：React() —— 使用狀態(tài)
- Effect hook：React.useEffect() ——使用生命周期鉤子
- Ref Hook：React.useRef() ——保存標(biāo)簽對(duì)象
State hook
- State hook讓函數(shù)式組件也可以有state狀態(tài)，并進(jìn)行狀態(tài)數(shù)據(jù)的讀寫操作
- 語(yǔ)法：cons [xxx,setxxx] = React.useState(initValue)
- useState()說明
參數(shù)：第一次初始化內(nèi)部的值在內(nèi)部做緩存
返回值：包含2個(gè)元素的數(shù)組昼榛，第1個(gè)為內(nèi)部當(dāng)前狀態(tài)境肾，第2個(gè)為更新狀態(tài)值的函數(shù) - setxxx有2種寫法
setxxx(newValue)，參數(shù)為非函數(shù)值，直接指定新的狀態(tài)值奥喻，內(nèi)部用其覆蓋原來的狀態(tài)
setxxx(value => newValue)偶宫，參數(shù)為函數(shù)，接受原本的狀態(tài)值环鲤，返回新的狀態(tài)值纯趋，內(nèi)部用其覆蓋原來的狀態(tài)
import React from 'react'
import { useState } from 'react'
export default function HooksDemo() {
//const [狀態(tài),更新狀態(tài)的方法] = React.useState(初始值) useState的調(diào)用返回一個(gè)數(shù)組
const [count,setCount] = useState(0)
function handleAdd() {
//第一種寫法
setCount(count+1)
//第二種寫法
setCount(count => count+1)
}
return (
<div>
<h4>當(dāng)前求和為{count}</h4>
<button onClick={handleAdd}>點(diǎn)我+1</button>
</div>
)
}
Effect hook
- Effect hook可以讓你在函數(shù)組件中執(zhí)行副作用操作（模擬類組件中的生命周期鉤子）
- React中的副作用操作：發(fā)ajax請(qǐng)求數(shù)據(jù)、設(shè)置訂閱/設(shè)置定時(shí)器冷离、手動(dòng)更改真實(shí)DOM
- 語(yǔ)法說明：
useEeffct(()=>{
//在次可以執(zhí)行任何副作用操作
return ()=>{ //在組件卸載前執(zhí)行
//在此做一些收尾工作吵冒，例如清除定時(shí)器/取消訂閱
}
},[stateValue])//如果指定的是[ ]，回調(diào)函數(shù)只會(huì)在第一次render()后執(zhí)行 - 可以把useEeffct看成以下三個(gè)函數(shù)的組合
componentDidMount()西剥、componentDidUpdate()痹栖、componentWillUnmount()
export default function HooksDemo() {
const [count,setCount] = useState(0)
useEffect(()=>{
let timer = setInterval(()=>{
setCount(count => count+1)
},1000)
return () => {
clearInterval(timer)
}
},[])
function unmount () {
ReactDOM.unmountComponentAtNode(document.getElementById('root'))
}
return (
<div>
<h4>當(dāng)前求和為{count}</h4>
<button onClick={unmount}>卸載組件</button>
</div>
)
}
Ref Hook
- Ref Hook可以在函數(shù)組件中存儲(chǔ)/查找組件內(nèi)的標(biāo)簽或任意其他數(shù)據(jù)
- 語(yǔ)法：const RefContainer = useRef()
- 作用：保存標(biāo)簽對(duì)象，功能與React.createRef()一樣
export default function HooksDemo() {
const myRef = useRef()
function handleShow () {
alert(myRef.current.value)
}
return (
<div>
<input type="text" ref={myRef}/>
<button onClick={handleShow}>點(diǎn)我提示數(shù)據(jù)</button>
</div>
)
}
useRoutes()
根據(jù)路由表瞭空，動(dòng)態(tài)創(chuàng)建<Routes>和<Route>
//路由表配置 src/Routes/index.jsx
import { Navigate } from 'react-router-dom';
import Home from '../pages/Home'
import About from '../pages/About'
import Message from '../pages/Message'
import News from '../pages/News'
export default [
{
path: '/about',
element: <About/>
},
{
path: '/home',
element: <Home/>,
children:[
{
path: 'news',
element: <News/>
},
{
path: 'message',
element: <Message/>
}
]
},
{
path: '/',
element: <Navigate to="/home" replace={false}/>
}
]
// app.jsx
import './App.css';
import { Navigate, NavLink, useRoutes } from 'react-router-dom';
import routes from './Routes/index'
function App() {
const element = useRoutes(routes)
return (
<div>
<NavLink to="/about">About</NavLink>
<NavLink to="/home">Home</NavLink>
{element}
</div>
);
}
export default App;
useNavigate()
返回一個(gè)函數(shù)來實(shí)現(xiàn)變成導(dǎo)航
import React from 'react'
import { useNavigate } from 'react-router-dom'
export default function Demo() {
const navigate = useNavigate();
function showDetail () {
navigate('detail',{
replace: false,
state: {title:'111',content:'222'}
})
}
return (
<div><button onClick={showDetail}>查看詳情</button></div>
)
}
useParams()揪阿、useSearchParams()、useLocation()匙铡、useMatch()
useParams()：匹配當(dāng)前路由的params參數(shù)图甜，類似于5.x中的mach.params
useSearchParams()：用于讀取和修改當(dāng)前位置的URL的查詢字符串
import React from 'react'
import { useSearchParams } from 'react-router-dom'
export default function Detail() {
const [search,setSearch] = useSearchParams();
console.log(search)
const title = search.get('title');
const content = search.get('content');
return (
<div>
<button onClick={()=>setSearch('title=hh&content=hhh')}>點(diǎn)我更新</button>
標(biāo)題：{title}，內(nèi)容：{content}
</div>
)
}
useLocation()：獲取當(dāng)前l(fā)ocation信息鳖眼，對(duì)標(biāo)5.x中路由組件的location屬性
useMatch()：返回當(dāng)前匹配信息黑毅，對(duì)標(biāo)5.x中路由組件的match屬性
