博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
正式学习React (七) react-router 源码分析
阅读量:6626 次
发布时间:2019-06-25

本文共 2095 字,大约阅读时间需要 6 分钟。

学习react已经有10来天了,对于react redux react-redux 的使用流程和原理,也已经有一定的了解,在我上一篇的实战项目里,我用到了react-route,其实对它还只是

停留在看完阮神的博客的基础上,一丢丢的小认识,对history 到底怎么用,Route里的我见别人还写了getcomponent代替component也不是很清楚。决定好好分析一下

react-route。咱们一个一个组件来学习。

 

PS: 十几天的学习,我发现我的学习方式错了,其实应该直接先用一遍再来看源码,结果我反过来了,为了修改我的学习方式,我先停2天,等我用完再来写。。

 

我们先来看下Router是个什么组件:

1  getDefaultProps() {2     return {3       render(props) {4         return 
5 }6 }7 },
View Code

 

1:首先在Router里面先会生成一个RouterContext的js对象。作为newTree.

1 const RouterContext = React.createClass({2 3   mixins: [ ContextProvider('router') ],4 5              .....6   },
View Code

 

2:在RouterContext里会执行minixs,添加的是ContextProvider返回的方法。

1 const contextProviderShape = PropTypes.shape({ 2   subscribe: PropTypes.func.isRequired, 3   eventIndex: PropTypes.number.isRequired 4 }) 5  6 function makeContextName(name) { 7   return `@@contextSubscriber/${name}` 8 } 9 10 export function ContextProvider(name) {11   const contextName = makeContextName(name)12   const listenersKey = `${contextName}/listeners`13   const eventIndexKey = `${contextName}/eventIndex`14   const subscribeKey = `${contextName}/subscribe`15 16   return {17     childContextTypes: {18       [contextName]: contextProviderShape.isRequired19     },20 21     getChildContext() {22       return {23         [contextName]: {24           eventIndex: this[eventIndexKey],25           subscribe: this[subscribeKey]26         }27       }28     },29 30     componentWillMount() {31       this[listenersKey] = []32       this[eventIndexKey] = 033     },34 35     componentWillReceiveProps() {36       this[eventIndexKey]++37     },38 39     componentDidUpdate() {40       this[listenersKey].forEach(listener =>41         listener(this[eventIndexKey])42       )43     },44 45     [subscribeKey](listener) {46       // No need to immediately call listener here.47       this[listenersKey].push(listener)48 49       return () => {50         this[listenersKey] = this[listenersKey].filter(item =>51           item !== listener52         )53       }54     }55   }56 }
View Code

 

转载于:https://www.cnblogs.com/huenchao/p/6141076.html

你可能感兴趣的文章
2013 Regional 总结 与 acm 感想 由新手到菜鸟
查看>>
canvas知识点总结3
查看>>
[设计模式]<<设计模式之禅>>之关于单一职责原则
查看>>
单链表
查看>>
MssqlOnLinux高可用--集群故障转移【4】
查看>>
Microsoft Soft SQL Server 大数据----分区表性能测试
查看>>
[转]ubuntu 安装code blocks全记录
查看>>
1:IMEI、MSISDN字段隐藏方法
查看>>
poj1664 放苹果
查看>>
【C++基础 04】vector详解
查看>>
Prism之WPF模块化入门(一)
查看>>
学JS的心路历程Day26 - PixiJS -入坑
查看>>
Android自定义控件系列之应用篇——圆形进度条
查看>>
关于stackoverflow网站访问过慢的问题
查看>>
快速入门系列--MVC--04模型
查看>>
Win实用好用软件清单推荐
查看>>
find the safest road
查看>>
<%%>与<scriptrunat=server>,<%=%>与<%#%>的区别(转)
查看>>
Javascript中函数的四种调用方式
查看>>
Java - byte[] 和 String互相转换
查看>>