內(nèi)容：生命周期、路由

一、生命周期

1.頁面渲染期

constructor 構(gòu)造函數(shù)

UNSAFE_componentWillMount 組件將要掛載

render 頁面渲染

componentDidMount 組件掛載

2.頁面更新期

UNSAFE_componentWillReceiveProps 子組件將要接收父組件傳遞的動態(tài)數(shù)據(jù)

shouldComponetUpdate 是否要更新數(shù)據(jù)

UNSAFE_componentWillUpdate 組件將要更新數(shù)據(jù)

render 頁面渲染

componentDidUpdate 組件更新完成

3.頁面卸載

componentWillUnmount 組件將要卸載

二、路由【重點】

作用：能夠根據(jù)瀏覽器地址的變化來展示不同的組件內(nèi)容，從而實現(xiàn)項目規(guī)?；_發(fā)。

1.安裝

npm install react-router-dom --save

2.引用

(1)在項目根目錄的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都會在頁面上生成一個a標(biāo)簽，都需要設(shè)置to屬性（目標(biāo)路由規(guī)則地址），但是Link標(biāo)簽沒有選中類名，NavLink有選中類名。NavLink有一個非必填選項activeClassName，用來設(shè)置當(dāng)前選中的標(biāo)簽的類名。

②編程式導(dǎo)航

通過this.props.history

push 把當(dāng)前的路由規(guī)則進行記錄并跳轉(zhuǎn)到指定的路由規(guī)則中

replace 用指定的路由規(guī)則替換當(dāng)前訪問的路由規(guī)則，然后進行頁面跳轉(zhuǎn)

go 返回到指定層級的頁面中，一般寫-1，表示回退到上一個頁面中

goBack 回退到上一個訪問的頁面中

(4)路由嵌套

第一步：創(chuàng)建頁面組件

第二步：指定的一級路由規(guī)則對應(yīng)的頁面中引入子級頁面組件，并定義子級路由規(guī)則

注意：子級路由規(guī)則的path屬性必須包含一級路由規(guī)則名

/引入子級頁面組件
import Food from './Food'
import Movie from './Movie'
//定義子級路由規(guī)則
<Switch>
     <Route path="/home/food" component={ Food }></Route>
     <Route path="/home/movie" component={ Movie }></Route>
</Switch>

(5)動態(tài)路由

4.路由代碼優(yōu)化

現(xiàn)在在根組件和首頁組件分別取寫了<Switch></Switch>和<Route></Route>來實現(xiàn)路由的基本使用。但是如果項目規(guī)模變大了，上面的方式的可維護性和復(fù)用性不高。為了解決這個問題，我們要把<Switch>一系列組件做成一個公用組件，然后通過組件傳值來實現(xiàn)創(chuàng)建不同的路由規(guī)則。

在/src/router/index.js，創(chuàng)建一個公用的組件，根據(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來定義一級路由規(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使用

//引入一級路由配置
import AppRoutes from './router/AppRoutes'
//引入路由共用組件
import Router from './router'

<Router data={ AppRoutes }></Router>

定義首頁的二級路由規(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實現(xiàn)一個后臺管理系統(tǒng)靜態(tài)頁面(仿照Vue商城后臺項目)