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

注：V4

一、react-router-dom 基本组件

路由器 Routers

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

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

路由匹配 Route Matching

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

注：一般在子节点中加无path的，置于最后，作为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 
Page1
    }

}

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 
Page2
    }

}

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 (
            

                

                    
Page1
                    
Page2
                
            
        )
    }

}

class App extends Component {

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

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

  render() {
    return (
          
              

                
                
                
              
          
    );
  }
}

export default App;

进入Home 界面

点击Page1

返回Home

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