react-router-dom 及组件生命周期

注：V4

一、react-router-dom 基本组件

路由器 Routers

• BrowserRouter 响应请求服务
• HashRouter 静态文件服务

注：两者都只能有一个一级节点，且都会为你创建一个特有的history

路由匹配 Route Matching

• Route
  根据path 匹配当前路径，然后根据匹配结果渲染component组件，如果未匹配到任何一个，则渲染为空，如果无path则可以匹配所有路径
• Switch
  对于可能匹配到多个结果的情况，匹配时遍历被<Switch>包裹的所有<Route>，渲染第一个匹配结果

注：一般在<Switch>子节点中加无path的<Route>，置于最后，作为404 页面组件匹配

二、组件生命周期

import React, {Component } from 'react';
import './App.css';

import {
    Link,
    Route,
    BrowserRouter as Router
} from 'react-router-dom'


class Page1 extends React.Component{

    constructor(props){
        super(props)
        console.log('Page1 Constructor')
    }

    componentDidMount(){
        console.log('Page1 Mount')
    }
    componentWillUnmount(){
        console.log('Page1 Unmount')
    }

    render(){
        return <h1>Page1</h1>
    }

}

class Page2 extends React.Component{

    constructor(props){
        super(props)
        console.log('Page2 Constructor')
    }

    componentDidMount(){
        console.log('Page2 Mount')
    }
    componentWillUnmount(){
        console.log('Page2 Unmount')
    }

    render(){
        return <h1>Page2</h1>
    }

}

class Home extends React.Component{

    constructor(props){
        super(props)
        console.log('Home Constructor')
    }

    componentDidMount(){
        console.log('Home Mount')
    }
    componentWillUnmount(){
        console.log('Home Unmount')
    }

    render(){
        return (
            <div>
                <ul>
                    <li><Link to="/page1">Page1</Link></li>
                    <li><Link to="/page2">Page2</Link></li>
                </ul>
            </div>
        )
    }

}

class App extends Component {

    constructor(props){
        super(props)
        console.log('App Constructor')
    }

    componentDidMount(){
        console.log('App Mount')
    }
    componentWillUnmount(){
        console.log('App Unmount')
    }

  render() {
    return (
          <Router>
              <div>
                <Route path='/' exact={true} component={Home}/>
                <Route path='/page1' component={Page1}/>
                <Route path='/page2' component={Page2}/>
              </div>
          </Router>
    );
  }
}

export default App;

进入Home 界面

点击Page1

返回Home

注：依次可以看出，每次页面组件都会经历完整的生命周期（其他周期函数未写，可自行脑补），对于大型应用，用户按需加载，可以增加响应速度，提升用户体验，但是对于小型应用（特别是需要频繁切换页面），算是有点浪费运存