VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • 浅谈react-router@4.0 使用方法和源码分析

    react-router-dom@4.3.0 || react-router@4.4.1

    react-router 使用方法

    配置 router.js

    import React, { Component } from 'react';
    import { Switch, Route } from 'react-router-dom';
    
    const router = [{
      path: '/',
      exact: true,
      component:importPath({
       loader: () => import(/* webpackChunkName:"home" */ "pages/home/index.js"),
      }),
     },]
    const Routers = () => (
     <main>
      <Switch>
       {
        router.map(({component,path,exact},index)=>{
         return <Route exact={exact} path={path} component={component} key={path} />
        })
       }
      </Switch>
     </main>
    );
    
    export default Routers;
    
    

    入口 index.js

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

    home.js

    import { withRouter } from "react-router-dom";
    
    @withRouter
    class Home extends React.Component<PropsType, stateType> {
     constructor(props: PropsType) {
      super(props);
      this.state = {};
     }
     goPath=()=>{
       this.props.history.push('/home')
     }
     render() {
      return (
       <div onClick={this.goPath}>home</div>
      );
     }
    export default Home;
    
    

    react-router 源码解析

    下面代码中会移除部分的类型检查和提醒代码,突出重点代码

    第一步 Switch react-router

    function _possibleConstructorReturn(self, call) {
     if (!self) {
      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
     }
     if(call&&(typeof call === "object" || typeof call === "function") ){
      return call
     }else {
      return self
     }
    }
    var Switch = function (_React$Component) {
     function Switch() {
      //使用传递进来的组件覆盖本身
      return _possibleConstructorReturn(this, _React$Component.apply(this, arguments)); 
     }
     Switch.prototype.render = function render() {
      var route = this.context.router.route;
      var children = this.props.children;
      var location = this.props.location || route.location;
      var match = void 0,child = void 0;
      
      //检查element是否是react组件,初始match为null,
      React.Children.forEach(children, function (element) {
       //如果match符合,forEach不会进入该if
       if (match == null && React.isValidElement(element)) { 
        var _element$props = element.props,
          pathProp = _element$props.path,
          exact = _element$props.exact,
          strict = _element$props.strict,
          sensitive = _element$props.sensitive,
          from = _element$props.from;
        var path = pathProp || from;
        child = element; 
        //检查当前配置是否符合,
        match = matchPath(location.pathname, { path: path, exact: exact, strict: strict, sensitive: sensitive }, route.match); 
       }
      });
      //如果有匹配元素,则返回克隆child
      return match ? React.cloneElement(child, { location: location, computedMatch: match }) : null;
     };
    
     return Switch;
    }(React.Component);
    
    

    总结:switch根据location.pathname,path,exact,strict,sensitive获取元素并返回element

    第二步 Route react-router

    var Route = function (_React$Component) {
     function Route() {
      var _temp, _this, _ret;
      //获取参数
      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
      }
      //修改this
      return _ret = (
       _temp = (_this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), 
       //检查当前元素是否符合match
       _this.state = {match: _this.computeMatch(_this.props,_this.context.router)},_temp),
        //这里是真正return
        _possibleConstructorReturn(_this, _ret); 
     }
     // 设置content
     Route.prototype.getChildContext = function getChildContext() {
      return {
       router: _extends({}, this.context.router, {
        route: {
         location: this.props.location || this.context.router.route.location,
         match: this.state.match
        }
       })
      };
     };
     // 根据参数检查当前元素是否符合匹配规则
     Route.prototype.computeMatch = function computeMatch(_ref, router) {
      var computedMatch = _ref.computedMatch,
        location = _ref.location,
        path = _ref.path,
        strict = _ref.strict,
        exact = _ref.exact,
        sensitive = _ref.sensitive;
    
      if (computedMatch) return computedMatch;
    
      var route = router.route;
    
      var pathname = (location || route.location).pathname;
    
      return matchPath(pathname, { path: path, strict: strict, exact: exact, sensitive: sensitive }, route.match);
     };
     // 设置match
     Route.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps, nextContext) {
      this.setState({
       match: this.computeMatch(nextProps, nextContext.router)
      });
     };
    
     Route.prototype.render = function render() {
      var match = this.state.match;
      var _props = this.props,
        children = _props.children,
        component = _props.component,
        render = _props.render;
      var _context$router = this.context.router,
        history = _context$router.history,
        route = _context$router.route,
        staticContext = _context$router.staticContext;
    
      var location = this.props.location || route.location;
      var props = { match: match, location: location, history: history, staticContext: staticContext };
      //检查route 是否有component组
      if (component) return match ? React.createElement(component, props) : null; 
      // 检查是否包含render 组件
      if (render) return match ? render(props) : null;
      // withRouter 使用的方式
      if (typeof children === "function") return children(props);
    
      if (children && !isEmptyChildren(children)) return React.Children.only(children);
    
      return null;
     };
    
     return Route;
    }(React.Component);
    
    

    总结:route 渲染的方式: component render children,代码示例用的是component,route 是检查当前组件是否符合路由匹配规则并执行创建过程

    第三步 HashRouter react-router-dom

    import Router from './Router'
    import {createHistory} from 'history'
    var HashRouter = function (_React$Component) {
     function HashRouter() {
      var _temp, _this, _ret;
      //参数转换为数组
      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { 
       args[_key] = arguments[_key];
      }
      return _ret = (
       _temp = (_this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this),
        _this.history = createHistory(_this.props), _temp), //创建history
        _possibleConstructorReturn(_this, _ret); //真正返回的东西 返回this
     }
     HashRouter.prototype.render = function render() {
      // 返回一个Router,并且把history,children传递给Router
      return React.createElement(Router, { history: this.history, children: this.props.children });
     };
     return HashRouter;
    }(React.Component);
    

    总结 通过 history库里面 createHistory 创建路由系统

    第四部 Router react-router

    var Router = function (_React$Component) {
     function Router() {
      var _temp, _this, _ret;
      //获取参数,和其他组件一样
      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
      }
      return _ret = (_temp = (_this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.state = {
       match: _this.computeMatch(_this.props.history.location.pathname) //返回路由对象
      }, _temp), _possibleConstructorReturn(_this, _ret); //返回this
     }
     // 返回context
     Router.prototype.getChildContext = function getChildContext() {
      return {
       router: _extends({}, this.context.router, {
        history: this.props.history,
        route: {
         location: this.props.history.location,
         match: this.state.match
        }
       })
      };
     };
      
     Router.prototype.computeMatch = function computeMatch(pathname) {
      return {
       path: "/",
       url: "/",
       params: {},
       isExact: pathname === "/"
      };
     };
    
     Router.prototype.componentWillMount = function componentWillMount() {
      var _this2 = this;
    
      var _props = this.props,
        children = _props.children,
        history = _props.history;
    
      // 启动监听 当hash 改变是做一次检查,并返回unlisten 取消事件
      this.unlisten = history.listen(function () {
       _this2.setState({
        match: _this2.computeMatch(history.location.pathname)
       });
      });
     };
     //销毁前取消监听
     Router.prototype.componentWillUnmount = function componentWillUnmount() {
      this.unlisten();
     };
     // children是HashRouter 传递进来的
     Router.prototype.render = function render() {
      var children = this.props.children;
      return children ? React.Children.only(children) : null;
     };
    
     return Router;
    }(React.Component);
    
    

    总结 history是一个JavaScript库,可让您在JavaScript运行的任何地方轻松管理会话历史记录。history抽象出各种环境中的差异,并提供最小的API,使您可以管理历史堆栈,导航,确认导航以及在会话之间保持状态。

    第五部 withRouter <react-router>

    var withRouter = function withRouter(Component) {
     var C = function C(props) {
      //获取props
      var wrappedComponentRef = props.wrappedComponentRef,
        remainingProps = _objectWithoutProperties(props, ["wrappedComponentRef"]);
      // Route 组件 children方式
      return React.createElement(Route, {
       children: function children(routeComponentProps) {
        // 这里使用的是route 组件 children(props)
        //routeComponentProps 实际等于 { match: match, location: location, history: history, staticContext: staticContext };
        return React.createElement(Component, _extends({}, remainingProps, routeComponentProps, {
         ref: wrappedComponentRef
        }));
       }
      });
     };
    
     C.displayName = "withRouter(" + (Component.displayName || Component.name) + ")";
     C.WrappedComponent = Component;
     // 该类似于object.assign(C,Component),得到的结果是C
     return hoistStatics(C, Component);
    };
    
    

    到这里真个流程基本结束了,这只是react-router的一种使用方式的解析,本文的目的是理解react-router的运行机制,如果有什么错误还望指出,谢谢

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持北冥有鱼。

    您可能感兴趣的文章:

    • 深入理解react-router@4.0 使用和源码解析

    广而告之:
    热门推荐:
    vue-router权限控制(简单方式)

    在vue-router控制前端权限是常见需求: 有一种做法是直接在后端完成判断,提供页面列表和操作列表,在前端进行渲染,但这个方案并不优雅,前后端耦合度比较高。 比较常见的做法是把登录页面独立在router之外,专门写一个权限控制文件,在登录之后根据用户权限加载router,之后···

    css3media响应式布局实例

    响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用"大势所趋"来形容也不为过。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。随着技术的发展css3的特性也被广泛应用···

    Laravel多用户认证系统示例详解

    前言 自从Laravel5.2开始,自带的Auth认证系统可以支持多个角色认证了。就是说你比如果有管理员、普通用户这两种角色,都可以通过同一个Auth系统来实现认证。 本文将详细给大家介绍关于Laravel多用户认证系统的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看···

    CSS预处理器Sass详解

    Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更···

    php 生成饼图 三维饼图

    饼图 复制代码 代码如下: <?php //+------------------------+ //| pie3dfun.PHP//公用函数 | //+------------------------+ define("ANGLE_STEP", 3); //定义画椭圆弧时的角度步长 define("FONT_USED", "C:\WINDOWS\Fonts\simhei.ttf"); // 使用到的字体文件位置 fun···

    PHP Ajax实现页面无刷新发表评论

    大家都有在网站发表评论的经历,传统的发表过程无非是:发表->提交页面表单->等待刷新页面,这样在网络比较拥挤的时候,往往需要漫长的等待,今天介绍用PHP+Ajax实现页面无刷新发表评论,希望对初学ajax的PHPer有所帮助。    那么首先,我们需要一个基···

    Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)

    数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据。本文为用Vue实现方式,另有一篇为用knockout.js的实现方法。 html代码 <div id="table-component-div"> <tab···

    php生成缩略图质量较差解决方法代码示例

    近期弄个论坛,在首页要有个排名,显示评论最多的前十位用户的列表,列表有个略图是用户最新上传的作品,如果使用原来的图,图片过大,首页加载过慢,因此要使用略图 以上来使用imagecopyresized这个函数,显示质量很差如图 后来改用imagecopyresampled效果明显改变效果如图 ···

    mysql5.7.18安装时提示无法找到入口问题的解决方法

    安装mysql5.7.18出现如下问题,无法定位程序输入点fesetround与动态链接库MSVCR120.dll上,网友给出了解决办法 问题截图如下: 解决方法1: 你可以使用mysql的绿色免解压安装版。 也可以使用wnmp或者xampp,这种集成包。 推荐使用mariadb,而不是mysql(逃) 验证过的解决方···

    织梦网站中如何插入百度地图

    第一步:进入百度创建地图的网站http://api.map.baidu.com/lbsapi/creatmap/,打开后如图: 第二步:看到图中第一步的下面有1,2,3三个小步骤,打开1.定位中心点→切换里面的城市按钮,选择你要展示的城市位置→在输入框中输入具体的地址,点击查找,就···