React-router

BaronZhang 發(fā)布于2019-08-23 10:31 / 2393人閱讀

摘要：依賴(lài)于一概念理解痛點(diǎn)界面需要導(dǎo)航，需要根據(jù)不同的導(dǎo)航加載不同的模塊需要處理的問(wèn)題地址欄按需加載不同的模塊適當(dāng)進(jìn)行個(gè)性化處理其實(shí)，上面兩個(gè)問(wèn)題，并不難處理，但是本著抽象的原則，需要抽象出一個(gè)通用的模塊。提供了一個(gè)良好的機(jī)制進(jìn)行處理。

React-router依賴(lài)于：history

一、概念理解

痛點(diǎn)：界面需要導(dǎo)航，需要根據(jù)不同的導(dǎo)航加載不同的模塊
需要處理的問(wèn)題：
1、URL地址欄
2、按需加載不同的模塊（適當(dāng)進(jìn)行個(gè)性化處理）
其實(shí)，上面兩個(gè)問(wèn)題，并不難處理，但是本著抽象的原則，需要抽象出一個(gè)通用的模塊。
React-router提供了一個(gè)良好的機(jī)制進(jìn)行處理。

二、簡(jiǎn)單Demo

三、源碼解析 1、Router和Route

????Route：匹配路徑，并進(jìn)行渲染

//代碼是部分代碼模塊，如果想看真的源碼，移步github
class Route extends React.Component(){
    constructor(){
        this.state={
            match:this.computeMatch(this.props, this.context.router)
        }
    }
    //這部分的目的主要是讓大家了解下源碼中需要輸入的參數(shù)和類(lèi)型
    static propTypes = {
        computedMatch: PropTypes.object, // private, from 
        path: PropTypes.string,
        exact: PropTypes.bool,
        strict: PropTypes.bool,
        sensitive: PropTypes.bool,
        component: PropTypes.func,
        render: PropTypes.func,
        children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
        location: PropTypes.object
    };
    //每次路由發(fā)生變化，就進(jìn)行重新渲染
    componentWillReceiveProps(nextProps,nextContext){
        this.setState({
            match: this.computeMatch(nextProps, nextContext.router)
        });
    }
    render(){
        //返回
            if (component) return match ? React.createElement(component, props) : null;

    }
}

????Router：把history放入全局的context里面

class Router extends React.Component {
    //輸入?yún)?shù)多了history
    static propTypes = {
        history: PropTypes.object.isRequired,
        children: PropTypes.node
    };
    //大部分都一樣，render返回不一樣
    render() {
        const { children } = this.props;
        return children ? React.Children.only(children) : null;
      }
}

2、Switch、Redirect

//switch核心模塊
    let match, child;
    React.Children.forEach(children, element => {
      if (match == null && React.isValidElement(element)) {
        const {
          path: pathProp,
          exact,
          strict,
          sensitive,
          from
        } = element.props;
        const path = pathProp || from;

        child = element;
        match = matchPath(
          location.pathname,
          { path, exact, strict, sensitive },
          route.match
        );
      }
    });

    return match
      ? React.cloneElement(child, { location, computedMatch: match })
      : null;
      
//Redirect核心模塊
componentDidUpdate(prevProps) {
    const prevTo = createLocation(prevProps.to);
    const nextTo = createLocation(this.props.to);
    this.perform();
  }

  computeTo({ computedMatch, to }) {
    if (computedMatch) {
      if (typeof to === "string") {
        return generatePath(to, computedMatch.params);
      } else {
        return {
          ...to,
          pathname: generatePath(to.pathname, computedMatch.params)
        };
      }
    }

    return to;
  }

  perform() {
    const { history } = this.context.router;
    const { push } = this.props;
    const to = this.computeTo(this.props);

    if (push) {
      history.push(to);
    } else {
      history.replace(to);
    }
  }

3、HashRouter、BrowserRouter：以Router為基礎(chǔ)

//HashRouter源碼很簡(jiǎn)單
import { createHashHistory as createHistory } from "history";

class HashRouter extends React.Component {
  static propTypes = {
    basename: PropTypes.string,
    getUserConfirmation: PropTypes.func,
    hashType: PropTypes.oneOf(["hashbang", "noslash", "slash"]),
    children: PropTypes.node
  };

  history = createHistory(this.props);

  render() {
    return ;
  }
}

//BrowserRouter源碼也很簡(jiǎn)單
import { createBrowserHistory as createHistory } from "history";

class BrowserRouter extends React.Component {
  static propTypes = {
    basename: PropTypes.string,
    forceRefresh: PropTypes.bool,
    getUserConfirmation: PropTypes.func,
    keyLength: PropTypes.number,
    children: PropTypes.node
  };

  history = createHistory(this.props);

  render() {
    return ;
  }
}