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(
(5)动态路由
4.路由代码优化
现在在根组件和首页组件分别取写了一系列组件做成一个公用组件，然后通过组件传值来实现创建不同的路由规则。
在/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(
{els}
)
}
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'
{/* 路由出口（可视区） */}
{/* 路由规则 */}
);
}
export default App;
就可以通过浏览器地址的变化来展示不同的组件内容。
(2)重定向
从react路由中引出Redirect组件
import { Switch,Route,Redirect } from 'react-router-dom'
function App() {
return (
{/* 路由出口（可视区） */}
{/* 路由规则 */}
);
}
(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'
//定义子级路由规则
发表评论 (审核通过后显示评论)：