內(nèi)容：生命周期证舟、路由
一、生命周期
1.頁面渲染期
constructor 構(gòu)造函數(shù)
UNSAFE_componentWillMount 組件將要掛載
render 頁面渲染
componentDidMount 組件掛載
2.頁面更新期
UNSAFE_componentWillReceiveProps 子組件將要接收父組件傳遞的動(dòng)態(tài)數(shù)據(jù)
shouldComponetUpdate 是否要更新數(shù)據(jù)
UNSAFE_componentWillUpdate 組件將要更新數(shù)據(jù)
render 頁面渲染
componentDidUpdate 組件更新完成
3.頁面卸載
componentWillUnmount 組件將要卸載
二窗骑、路由【重點(diǎn)】
作用：能夠根據(jù)瀏覽器地址的變化來展示不同的組件內(nèi)容褪储，從而實(shí)現(xiàn)項(xiàng)目規(guī)模化開發(fā)慧域。
1.安裝
npm install react-router-dom --save
2.引用
(1)在項(xiàng)目根目錄的src/index.js文件中增加react-router-dom的引入
import { BrowserRouter } from 'react-router-dom'
ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));
3.路由使用
(1)基本使用
第一步：創(chuàng)建頁面組件
第二步：在需要使用路由的頁面中引入頁面組件和路由組件（Switch鲤竹、Route）
Switch 路由出口
Route 路由規(guī)則
import React from 'react';
import './App.css';
// 引入頁面組件
import Home from './components/Home'
import Order from './components/Order'
// 引入路由相關(guān)組件
import { Switch,Route } from 'react-router-dom'
function App() {
return (
<div className="container">
{/* 路由出口（可視區(qū)） */}
<Switch>
{/* 路由規(guī)則 */}
<Route path="/home" component={ Home }></Route>
<Route path="/order" component={ Order }></Route>
</Switch>
</div>
);
}
export default App;
就可以通過瀏覽器地址的變化來展示不同的組件內(nèi)容。
(2)重定向
從react路由中引出Redirect組件
import { Switch,Route,Redirect } from 'react-router-dom'
function App() {
return (
<div className="container">
{/* 路由出口（可視區(qū)） */}
<Switch>
{/* 路由規(guī)則 */}
<Route path="/home" component={ Home }></Route>
<Route path="/order" component={ Order }></Route>
<Redirect to="/home"></Redirect>
</Switch>
</div>
);
}
(3)路由導(dǎo)航
①內(nèi)置標(biāo)簽
Link
NavLink
Link和NavLink都會(huì)在頁面上生成一個(gè)a標(biāo)簽昔榴，都需要設(shè)置to屬性（目標(biāo)路由規(guī)則地址）辛藻，但是Link標(biāo)簽沒有選中類名，NavLink有選中類名互订。NavLink有一個(gè)非必填選項(xiàng)activeClassName吱肌，用來設(shè)置當(dāng)前選中的標(biāo)簽的類名。
②編程式導(dǎo)航
通過this.props.history
push 把當(dāng)前的路由規(guī)則進(jìn)行記錄并跳轉(zhuǎn)到指定的路由規(guī)則中
replace 用指定的路由規(guī)則替換當(dāng)前訪問的路由規(guī)則仰禽，然后進(jìn)行頁面跳轉(zhuǎn)
go 返回到指定層級(jí)的頁面中氮墨，一般寫-1，表示回退到上一個(gè)頁面中
goBack 回退到上一個(gè)訪問的頁面中
(4)路由嵌套
第一步：創(chuàng)建頁面組件
第二步：指定的一級(jí)路由規(guī)則對(duì)應(yīng)的頁面中引入子級(jí)頁面組件吐葵，并定義子級(jí)路由規(guī)則
注意：子級(jí)路由規(guī)則的path屬性必須包含一級(jí)路由規(guī)則名
/引入子級(jí)頁面組件
import Food from './Food'
import Movie from './Movie'
//定義子級(jí)路由規(guī)則
<Switch>
<Route path="/home/food" component={ Food }></Route>
<Route path="/home/movie" component={ Movie }></Route>
</Switch>
(5)動(dòng)態(tài)路由
4.路由代碼優(yōu)化
現(xiàn)在在根組件和首頁組件分別取寫了<Switch></Switch>和<Route></Route>來實(shí)現(xiàn)路由的基本使用规揪。但是如果項(xiàng)目規(guī)模變大了，上面的方式的可維護(hù)性和復(fù)用性不高温峭。為了解決這個(gè)問題猛铅，我們要把<Switch>一系列組件做成一個(gè)公用組件，然后通過組件傳值來實(shí)現(xiàn)創(chuàng)建不同的路由規(guī)則凤藏。
在/src/router/index.js奸忽，創(chuàng)建一個(gè)公用的組件，根據(jù)傳遞的來生成路由規(guī)則揖庄。
import React from 'react'
/**
* 函數(shù)組件
* 根據(jù)傳遞的數(shù)據(jù)栗菜，來生成不同的路由規(guī)則
*/
import { Switch,Route,Redirect } from 'react-router-dom'
const router = (props)=>{
var els = props.data.map((item,index)=>{
return(
<Route key={ index } path={ item.path } component={ item.component }></Route>
)
})
return(
<Switch>
{els}
</Switch>
)
}
export default router;
然后在/src/router/AppRouters.js來定義一級(jí)路由規(guī)則
import Home from '../components/Home'
import Order from '../components/Order'
import My from '../components/My'
var AppRoutes = [
{
path:'/home',
component:Home
},
{
path:'/order',
component:Order
},
{
path:'/my',
component:My
}
];
export default AppRoutes;
在src/App.js使用
//引入一級(jí)路由配置
import AppRoutes from './router/AppRoutes'
//引入路由共用組件
import Router from './router'
<Router data={ AppRoutes }></Router>
定義首頁的二級(jí)路由規(guī)則
/src/router/HomeRoutes.js
import Food from '../components/Food'
import Movie from '../components/Movie'
var HomeRoutes = [
{
path:'/home/food',
component:Food
},
{
path:'/home/movie',
component:Movie
}
]
export default HomeRoutes;
在src/components/Home.js使用
import HomeRoutes from '../router/HomeRoutes'
import MyRouter from '../router'
<Router data={ HomeRoutes }></Router>
三、作業(yè)
用react實(shí)現(xiàn)一個(gè)后臺(tái)管理系統(tǒng)靜態(tài)頁面(仿照Vue商城后臺(tái)項(xiàng)目)
