react 路由的基本原理及实现

1. react 路由原理

不同路径渲染不同的组件

有两种实现方式

● HasRouter 利用hash实现路由切换

● BrowserRouter 实现h5 API实现路由切换

1. 1 HasRouter

利用hash 实现路由切换

1.2 BrowserRouter

利用h5 Api实现路由的切换

1.2.1 history

• HTML5规范给我们提供了一个history接口
• HTML5 HIstory API包含两个方法：history.pushState()和history.replaceState(),和一个事件

  window.onpopstate pushState

  1.2.1.1 history.pushState(stateObject,title,url)

  ● 第一个参数用于存储该url对应的状态对象，该对象可在onpopstate事件中获取，也可在history对象中获取

  ● 第二个参数是标题，目前浏览器并未实现

  ● 第三个参数是设定的url

  pushState函数向浏览器的历史堆栈中压入一个url为设定值的记录，并改变历史堆栈的当前指针至栈顶

  1.2.1.2 replaceState

  ● 该接口与pushState参数相同，含义 也相同

  ● 唯一的区别在于replaceState是替换浏览器历史栈中的当前历史记录为设定的url

  
  （图片来源网络，侵删）

  ● 需要注意的是replaceState 不会改动浏览器历史堆栈的当前指针

  1.2.1.3 onpopstate

  ● 该事件是window属性

  ● 该事件会在调用浏览器的前进，后退以及在执行history.forward,history.back 和history.go 的时候触发。因为这些操作有一个共性，即修改了历史堆栈的当前指针

  ● 在不改变document 的前提下，一旦触发当前指针改变则会触发onpopstate事件

  2 实现基本路由

  2.1 HashRouter 基本用法及实现

  import React from 'react';
  import { Router } from '../react-router';
  import { createHashHistory } from '../history';
  class HashRouter extends React.Component {
      constructor(props) {
          super(props);
          this.history = createHashHistory(props)
      }
      render() {
          return (
              this.history}
                  {this.props.children}
              
          )
      }
  }
  export default HashRouter;
  

  history 下的 createHashHistory.js

  /**
   * 工厂方法，用来返回一个历史对象
   */
  function createHashHistory(props) {
      let stack = [];//模拟一个历史条目栈，这里放的都是每一次的location
      let index = -1;//模拟一个当前索引
      let action = 'POP';//动作
      let state;//当前状态
      let listeners = [];//监听函数的数组
      let currentMessage;
      let userConfirm = props.getUserConfirmation?props.getUserConfirmation():window.confirm;
      function go(n) {//go是在历史条目中跳前跳后，条目数不会发生改变
          action = 'POP';
          index += n;
          if(index 
              index=0;
          }else if(index =stack.length){
              index=stack.length-1;
          }
          let nextLocation = stack[index];
          state=nextLocation.state;
          window.location.hash = nextLocation.pathname;//用新的路径名改变当前的hash值
      }
      function goForward() {
          go(1)
      }
      function goBack() {
          go(-1)
      }
      let listener = ()=>{
          let pathname = window.location.hash.slice(1);// /users#/api  /api
          Object.assign(history,{action,location:{pathname,state}}); 
          if(action === 'PUSH'){
            stack[++index]=history.location;//1 2 3 6 5 
            //stack.push(history.location);
          }
          listeners.forEach(listener=>listener(history.location));
       }
      window.addEventListener('hashchange',listener);
      //to={pathname:'',state:{}}
      function push(to,nextState){
          action = 'PUSH';
          let pathname;
          if(typeof to === 'object'){
              state = to.state;
              pathname = to.pathname;
          }else {
              pathname = to;
              state = nextState;
          }
          if(currentMessage){
              let message = currentMessage({pathname});
              let allow = userConfirm(message);
              if(!allow) return;
          }
          window.location.hash = pathname;
      }
      function listen(listener) {
          listeners.push(listener);
          return function () {//取消监听函数,如果调它的放会把此监听函数从数组中删除
              listeners = listeners.filter(l => l !== listener);
          }
      }
      function block(newMessage){
          currentMessage = newMessage;
          return ()=>{
              currentMessage=null;
          }
      }
      const history = {
          action,//对history执行的动作
          push,
          go,
          goBack,
          goForward,
          listen,
          location:{pathname:window.location.hash.slice(1),state:undefined},
          block
      }
      if(window.location.hash){
          action = 'PUSH';
          listener();
      }else{
          window.location.hash='/';
      }
      return history;
  }
  export default createHashHistory;
  

  2.2 BrowserRouter基本用法及实现

  import React from 'react';
  import { Router } from '../react-router';
  import { createBrowserHistory } from '../history';
  class BrowserRouter extends React.Component {
      constructor(props) {
          super(props);
          this.history = createBrowserHistory(props)
      }
      render() {
          return (
              this.history}
                  {this.props.children}
              
          )
      }
  }
  export default BrowserRouter;
  

  history 下的 createBrowserHistory.js

  /**
   * 工厂方法，用来返回一个历史对象
   */
  function createBrowserHistory(props){
    let globalHistory = window.history;
    let listeners = [];
    let currentMessage;
    let userConfirm = props.getUserConfirmation?props.getUserConfirmation():window.confirm;
    function go(n){
      globalHistory.go(n);
    }
    function goForward(){
      globalHistory.goForward();
    }
    function goBack(){
      globalHistory.goBack();
    }
    function listen(listener){
      listeners.push(listener);
      return function(){//取消监听函数,如果调它的放会把此监听函数从数组中删除
          listeners = listeners.filter(l=>l!==listener);
      }
    }
    window.addEventListener('popstate',(event)=>{//push入栈 pop类似于出栈
      setState({action:'POP',location:{state:event.state,pathname:window.location.pathname}});
    });
    function setState(newState){
      Object.assign(history,newState);
      history.length = globalHistory.length;
      listeners.forEach(listener=>listener(history.location));
    }
    /**
     * push方法
     * @param {*} path 跳转的路径
     * @param {*} state 跳转的状态
     */
    function push(to,nextState){//对标history pushState
       const action = 'PUSH';
       let pathname;
       let state;
       if(typeof to === 'object'){
           state = to.state;
           pathname = to.pathname;
       }else {
           pathname = to;
           state = nextState;
       }
       if(currentMessage){
        let message = currentMessage({pathname});
        let allow = userConfirm(message);
        if(!allow) return;
       }
       globalHistory.pushState(state,null,pathname);
       let location = {state,pathname};
       setState({action,location});
    }
    function block(newMessage){
      currentMessage = newMessage;
      return ()=>{
          currentMessage=null;
      }
  }
    const history = {
      action:'POP',//对history执行的动作
      push,
      go,
      goBack,
      goForward,
      listen,
      location:{pathname:window.location.pathname,state:globalHistory.state},
      block
    }
    return history;
  }
  export default createBrowserHistory;