React第三天学习

内容：生命周期、路由

一、生命周期

1.页面渲染期

constructor 构造函数

UNSAFE_componentWillMount 组件将要挂载

render 页面渲染

componentDidMount 组件挂载

2.页面更新期

UNSAFE_componentWillReceiveProps 子组件将要接收父组件传递的动态数据

shouldComponetUpdate 是否要更新数据

UNSAFE_componentWillUpdate 组件将要更新数据

render 页面渲染

componentDidUpdate 组件更新完成

3.页面卸载

componentWillUnmount 组件将要卸载

二、路由【重点】

作用：能够根据浏览器地址的变化来展示不同的组件内容，从而实现项目规模化开发。

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)基本使用

第一步：创建页面组件

第二步：在需要使用路由的页面中引入页面组件和路由组件（Switch、Route）

Switch 路由出口

Route 路由规则

import React from 'react';
import './App.css';
// 引入页面组件
import Home from './components/Home' 
import Order from './components/Order' 
// 引入路由相关组件
import { Switch,Route } from 'react-router-dom'
function App() {
    return (
        <div className="container">
            {/* 路由出口（可视区） */}
            <Switch>
                {/* 路由规则 */}
                <Route path="/home" component={ Home }></Route>
                <Route path="/order" component={ Order }></Route>
            </Switch>
        </div>
    );
}
export default App;

就可以通过浏览器地址的变化来展示不同的组件内容。

(2)重定向

从react路由中引出Redirect组件

import { Switch,Route,Redirect } from 'react-router-dom'
function App() {
    return (
        <div className="container">
            {/* 路由出口（可视区） */}
            <Switch>
                {/* 路由规则 */}
                <Route path="/home" component={ Home }></Route>
                <Route path="/order" component={ Order }></Route>
                <Redirect to="/home"></Redirect>
            </Switch>
        </div>
    );
}

(3)路由导航

①内置标签

Link

NavLink

Link和NavLink都会在页面上生成一个a标签，都需要设置to属性（目标路由规则地址），但是Link标签没有选中类名，NavLink有选中类名。NavLink有一个非必填选项activeClassName，用来设置当前选中的标签的类名。

②编程式导航

通过this.props.history

push 把当前的路由规则进行记录并跳转到指定的路由规则中

replace 用指定的路由规则替换当前访问的路由规则，然后进行页面跳转

go 返回到指定层级的页面中，一般写-1，表示回退到上一个页面中

goBack 回退到上一个访问的页面中

(4)路由嵌套

第一步：创建页面组件

第二步：指定的一级路由规则对应的页面中引入子级页面组件，并定义子级路由规则

注意：子级路由规则的path属性必须包含一级路由规则名

/引入子级页面组件
import Food from './Food'
import Movie from './Movie'
//定义子级路由规则
<Switch>
     <Route path="/home/food" component={ Food }></Route>
     <Route path="/home/movie" component={ Movie }></Route>
</Switch>

(5)动态路由

4.路由代码优化

现在在根组件和首页组件分别取写了<Switch></Switch>和<Route></Route>来实现路由的基本使用。但是如果项目规模变大了，上面的方式的可维护性和复用性不高。为了解决这个问题，我们要把<Switch>一系列组件做成一个公用组件，然后通过组件传值来实现创建不同的路由规则。

在/src/router/index.js，创建一个公用的组件，根据传递的来生成路由规则。

import React from 'react'
/**
 * 函数组件
 *  根据传递的数据，来生成不同的路由规则
 */
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来定义一级路由规则

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>

定义首页的二级路由规则

/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>

三、作业

用react实现一个后台管理系统静态页面(仿照Vue商城后台项目)