react第四天美团案例之基本路由、动态路由、编程式导航

day21笔记

回顾

• 上周结束了vue(后台管理项目)
• React(js库)
• 创建组件的方式（函数创建、类的创建）
• 创建方式的区别和联系（函数创建方式没有生命周期，函数创建方式没有state,函数方式在传值的时候接收用的是 props相反类的创建方式接收传值数据的时候 用的是this.props）
• state(setState)
• props
• 组件通信（父子、子父）

---

未来两周的安排

• react（生命周期、路由、stylus、UI库、状态管理、flux、redux、做项目）
• Angular（2天）
• D3.js数据图表（结合svg）
• echarts和highCharts、百度地图
• git代码版本管理工具
• 工作流程公司人员安排
• 回过头看一下电商的项目（vant的使用，购物车的数据抓取）

---

一、生命周期

• Vue中的生命周期（8个）
• React中生命周期都有哪些内容

组件一加载，触发4个生命周期，生命周期的执行顺序是
constructor()初始化
componentWillMount() 将要挂载
render() 渲染 的是虚拟dom
componentDidMount() 挂载完成 — 在这个生命周期阶段我们会执行调取接口执行axios或者ajax还有倒计时，周期性函数等等

当数据发生变更，会影响视图的变化，我们会发现生命周期触发了那几个生命周期函数
分两种状态shouldComponentUpdate() 有两个参数，第一个参数是newProps新属性，第二个参数是newState
一、没有shouldComponentUpdate()
componentWillUpdate 组件将要更新
render() 重新渲染DOM结构
componentDidUpdate 更新完成
二、有shouldComponentUpdate()这个生命周期，也分两种状态，你要返回true OR false(根据你自己的需求和逻辑)
返回true的情况：会再次执行componentWillUpdate 组件将要更新
render() 重新渲染DOM结构
componentDidUpdate 更新完成
这三个生命周期函数
返回false的时候，生命周期结束，视图也不会有变化

---

二、路由

2.1基本路由

• 组件的渲染方式一、引入组件渲染二、通过路由的控制
• 在React中没有独立的路由文件，我们也要通过下载路由插件去实现路由，下载方式npm install react-router-dom react-router-dom@5.1.2
• 基本路由的实现
• 创建一个router文件夹，在文件夹下去创建一个index.js文件

//创建了一个函数组件
import React from 'react'
//引入路由的组件方法
import {Switch,Route,Redirect} from 'react-router-dom'
//引入你要渲染的组件
import Home from '../components/pages/home'
import Car from '../components/pages/car'
import Mine from '../components/pages/mine'
function Router(){
    return(
        <div>
        <Switch>
        <Route path='/home' component={Home}></Route>
        <Route path='/car' component={Car}></Route>
        <Route path='/mine' component={Mine}></Route>
        <Redirect to='/home'></Redirect>
        </Switch>
        </div>
    )
}
export default Router

• 在你想要渲染的地方去引入这个路由文件
• 我想在app.js中渲染

//路由出口（相当于vue中的router-view）
import Router from './router'
<Router></Router>

• 浏览器无法解析这些路由属性，所以在index.js（主的js文件）中 引入相关解析的路由属性方法
• BrowserRouter这个方法不带# 如果你想使用hash的方法就调用HashRouter

import { BrowserRouter } from 'react-router-dom'
ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));

import {HashRouter} from 'react-router-dom'
ReactDOM.render(<HashRouter><App /></HashRouter>, document.getElementById('root'));

• 用户看到的路由点击视图

//为用户创建视图 从路由插件中调取链接方法
import {Link,NavLink} from 'react-router-dom'
// 用Link这种链接方式没有activeClassName
// 用NavLink这种链接方式有activeClassName
      <NavLink to='/home' activeClassName='select'>首页</NavLink>
      <NavLink to='/car' activeClassName='select'>购物车</NavLink>
      <NavLink to='/mine' activeClassName='select'>个人中心</NavLink>

• 去掉路由文件， 把路由文件(一级路由)整合到app.js 中 ，出口相当于router-view

import React from 'react';
//先引入路由插件和路线方法
//引入路由跳转链接方法
import {Switch,Route,Redirect} from 'react-router-dom'

//引入 你要渲染的组件
import Index from './components/view/index'
import Login from './components/view/login'
function App() {
  return (
    <div className="App">
      <Switch>
        {/* 路由出口  相当于router-view*/}
        <Route path='/login' component={Login}></Route>
        <Route path='/index' component={Index}></Route>
        {/* 重定向 */}
        <Redirect to='/login'></Redirect>
      </Switch>
    </div>
  );
}

export default App;

---

2.2嵌套路由

• 在一级组件内想要渲染二级路由，先引入路由插件，再直接渲染，调用链接方法

//类的创建方式
import React from 'react'
//引入路由插件
import {Switch,Route,Redirect,NavLink} from 'react-router-dom'
//渲染引入二级组件内容
import Home from '../pages/home'
import Car from '../pages/car'
import Mine from '../pages/mine'

class Index  extends React.Component {
    constructor() {
        super()
    }
    render() {//渲染
        return (
            <div>
                <NavLink to='/index/home' activeClassName='select'>首页</NavLink>
                <NavLink to='/index/car' activeClassName='select'>购物车</NavLink>
                <NavLink to='/index/mine' activeClassName='select'>个人中心</NavLink>
                {/* 路由的内容显示 路由出口 */}
                <Switch>
                    <Route path='/index/home' component={Home}></Route>
                    <Route path='/index/car' component={Car}></Route>
                    <Route path='/index/mine' component={Mine}></Route>
                    <Redirect to='/index/home'></Redirect>
                </Switch>
            </div>
        )
    }
}
export default Index

---

2.3编程式导航

• 想要实现编程式导航

this.props.history.push('path')
this.props.history.replace('path')
this.props.history.go('-1')
以上三个方法都是基于，这个是路由渲染，props中含有history相关的属性和方法
如果这个组件不是路由渲染，是组件嵌套，那么我还想用路由的编程式导航，如何解决
//引入withRouter 这个方法 去使用路由中的属性方法
import { withRouter } from 'react-router-dom'
export default withRouter(goBack)
以上两句代码，让当前的类中props含有了路由的编程式方法 比如history

---

2.4 动态路由

• app.js

//动态路由
         <Route path='/movieDetail/:id' component={MovieDetail}></Route> 

• 动态路由的两种方法
• movieLis.js 都是传值

    //动态路由的跳转事件
    goDetail(id) {
        this.props.history.push('/movieDetail/' + id)
    }
                <ul>
                    {
                        movieList.map(item => {
                            return <li key={item.id}>
                                {/* 
                                动态路由的第一种方法 
                                 <NavLink to={'/movieDetail/'+item.id}><h1>{item.name}</h1></NavLink>
                                */}
                                {/* 
                                动态路由的第二种方法 编程式导航
                                this.props.history.push('/movieDetail/'+id)
                                <h1 onClick={this.goDetail.bind(this,item.id)}>{item.name}</h1>
                                */}
                            </li>
                        })
                    }
                </ul>

• movieDetail取值

<h1>获取动态的路由参数---{this.props.match.params.id}</h1>

---

三、美团案例

3.1 创建一个项目

create-react-app mydemo 用react创建一个脚手架项目

---

3.2 下载路由插件

npm i(install) react-router-dom

---

3.2 初始化整个项目

删除掉没有用的文件
留下index.js index.css app.js app.css 以及相关的文件
清空index.js 月app.js 文件内无关的内容

---

3.3 确定当前项目是PC端还是移动端（移动端）

• 创建一个assets文件夹引入js和css文件（rem和重置样式内容）
• index.js

//第一步 引入rem.js
import './assets/js/remScale'
//第二步 引入重置样式
import './assets/css/reset.css' 

---

3.4 创建component文件夹以及相关组件与其他目录结构

• 经过需求分析得知我们有6个一级路由4个二级路由
• 创建10个组件
• 目录结构

src
assets 静态资源管理
js css images
components 组件
pages views
common 公共组件
util 实用工具
axiosConfig配置文件 axios.js 接口文件

---

3.5 搭建一级路由

• app.js

import React from 'react';
import './App.css';
//引入一级路由
import Login from './components/pages/login'
import Index from './components/pages/index'
import MovieList from './components/pages/movieList'
import MovieDetail from './components/pages/movieDetail'
import FoodList from './components/pages/foodList'
import FoodDetail from './components/pages/foodDetail'
//引入路由插件
import {Switch,Route,Redirect} from 'react-router-dom'

function App() {
  return (
    <div className="App">
      {/* app根组件中 只有一级路由的出口 */}
      <Switch>
        <Route path='/login' component={Login}></Route>
        <Route path='/index' component={Index}></Route>
        <Route path='/movieList' component={MovieList}></Route>
        <Route path='/movieDetail' component={MovieDetail}></Route>
        <Route path='/foodList' component={FoodList}></Route>
        <Route path='/foodDetail' component={FoodDetail}></Route>
        <Redirect to='/index'></Redirect>
      </Switch>
    </div>
  );
}

export default App;

• index.js主js文件

//引入浏览器解析路由的方法
import {BrowserRouter} from 'react-router-dom'

ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));

• 去浏览器中手动输入一级路由的地址，测试是否好用

---

3.6 搭建二级路由

• index.js(一级路由)

import React from 'react'
//引入二级路由的组件
import Home from '../view/home'
import Mine from '../view/mine'
import Car from '../view/car'
import Sort from '../view/sort'
//引入路由插件以及跳转链接
import {Switch,Route,Redirect,NavLink} from 'react-router-dom'
class Index extends React.Component{
    render(){
        return(
            <div>
                <Switch>
                    <Route path='/index/home' component={Home}></Route>
                    <Route path='/index/sort' component={Sort}></Route>
                    <Route path='/index/car' component={Car}></Route>
                    <Route path='/index/mine' component={Mine}></Route>
                    <Redirect to='/index/home'></Redirect>
                </Switch>
                <div className='footer'>
                    <NavLink to='/index/home'>首页</NavLink>
                    <NavLink to='/index/sort'>分类</NavLink>
                    <NavLink to='/index/car'>购物车</NavLink>
                    <NavLink to='/index/mine'>个人中心</NavLink>
                </div>
            </div>
        )
    }
}
export default Index

---

3.7从电影入口跳转到电影列表页面

• home.js

                <NavLink to='/movieList'>                
                    <h1 className='box'>电影</h1>
                </NavLink>
                <h1 className='box' onClick={this.goFoodList.bind(this)}>美食</h1>

3.8封装一个公共的返回按钮组件

• goBack

//公共的返回按钮组件
import React from 'react'
//引入withRouter 这个方法 去使用路由中的属性方法
import { withRouter } from 'react-router-dom'
class goBack extends React.Component{
    render(){
        console.log(this,'组件')
        return(
            <div>
                <button onClick={()=>this.props.history.go(-1)}>返回</button>
            </div>
        )
    }
}
export default withRouter(goBack)

---

3.9从电影列表跳转到电影详情（动态路由）

• 动态路由的两种方法
• movieLis.js 都是传值

    //动态路由的跳转事件
    goDetail(id) {
        this.props.history.push('/movieDetail/' + id)
    }
                <ul>
                    {
                        movieList.map(item => {
                            return <li key={item.id}>
                                {/* 
                                动态路由的第一种方法 
                                 <NavLink to={'/movieDetail/'+item.id}><h1>{item.name}</h1></NavLink>
                                */}
                                {/* 
                                动态路由的第二种方法 编程式导航
                                this.props.history.push('/movieDetail/'+id)
                                <h1 onClick={this.goDetail.bind(this,item.id)}>{item.name}</h1>
                                */}
                            </li>
                        })
                    }
                </ul>

• movieDetail取值

<h1>获取动态的路由参数---{this.props.match.params.id}</h1>