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

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

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

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

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

  getDefaultProps() {
return {
render(props) {
return <RouterContext {...props} />
}
}
},

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

 const RouterContext = React.createClass({

   mixins: [ ContextProvider('router') ],

              .....
},

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

 const contextProviderShape = PropTypes.shape({
subscribe: PropTypes.func.isRequired,
eventIndex: PropTypes.number.isRequired
}) function makeContextName(name) {
return `@@contextSubscriber/${name}`
} export function ContextProvider(name) {
const contextName = makeContextName(name)
const listenersKey = `${contextName}/listeners`
const eventIndexKey = `${contextName}/eventIndex`
const subscribeKey = `${contextName}/subscribe` return {
childContextTypes: {
[contextName]: contextProviderShape.isRequired
}, getChildContext() {
return {
[contextName]: {
eventIndex: this[eventIndexKey],
subscribe: this[subscribeKey]
}
}
}, componentWillMount() {
this[listenersKey] = []
this[eventIndexKey] = 0
}, componentWillReceiveProps() {
this[eventIndexKey]++
}, componentDidUpdate() {
this[listenersKey].forEach(listener =>
listener(this[eventIndexKey])
)
}, [subscribeKey](listener) {
// No need to immediately call listener here.
this[listenersKey].push(listener) return () => {
this[listenersKey] = this[listenersKey].filter(item =>
item !== listener
)
}
}
}
}

正式学习React (七) react-router 源码分析的更多相关文章

  1. Mybatis源码学习第七天(插件源码分析)

    为了不把开发和源码分析混淆,决定分开写; 接下来分析一下插件的源码,说道这里老套路先说一个设计模式,他就是责任链模式 责任链模式:就是把一件工作分别经过链上的各个节点,让这些节点依次处理这个工作,和装 ...

  2. React事件杂记及源码分析

    前提 最近通过阅读React官方文档的事件模块,发现了其主要提到了以下三个点  调用方法时需要手动绑定this  React事件是一种合成事件SyntheticEvent,什么是合成事件?  事件属性 ...

  3. Redis学习之zskiplist跳跃表源码分析

    跳跃表的定义 跳跃表是一种有序数据结构,它通过在每个结点中维持多个指向其他结点的指针,从而达到快速访问其他结点的目的 跳跃表的结构 关于跳跃表的学习请参考:https://www.jianshu.co ...

  4. Nginx学习笔记(五) 源码分析&内存模块&内存对齐

    Nginx源码分析&内存模块 今天总结了下C语言的内存分配问题,那么就看看Nginx的内存分配相关模型的具体实现.还有内存对齐的内容~~不懂的可以看看~~ src/os/unix/Ngx_al ...

  5. Nginx学习笔记(四) 源码分析&socket/UDP/shmem

    源码分析 在茫茫的源码中,看到了几个好像挺熟悉的名字(socket/UDP/shmem).那就来看看这个文件吧!从简单的开始~~~ src/os/unix/Ngx_socket.h&Ngx_s ...

  6. Java显式锁学习总结之六:Condition源码分析

    概述 先来回顾一下java中的等待/通知机制 我们有时会遇到这样的场景:线程A执行到某个点的时候,因为某个条件condition不满足,需要线程A暂停:等到线程B修改了条件condition,使con ...

  7. Python学习---Django的request.post源码分析

    request.post源码分析: 可以看到传递json后会帮我们dumps处理一次最后一字节形式传递过去

  8. Java显式锁学习总结之五:ReentrantReadWriteLock源码分析

    概述 我们在介绍AbstractQueuedSynchronizer的时候介绍过,AQS支持独占式同步状态获取/释放.共享式同步状态获取/释放两种模式,对应的典型应用分别是ReentrantLock和 ...

  9. Redis学习之ziplist压缩列表源码分析

    一.压缩列表ziplist在redis中的应用 1.做列表键 当一个列表键只包含少量列表项,并且每个列表项要么是小整数,要么是短字符串,那么redis会使用压缩列表作为列表键的底层实现 2.哈希键 当 ...

  10. Redis学习之intset整数集合源码分析

    1.整数集合:整数的集合,升序排序,无重复元素 2.整数集合intset是集合键的底层实现之一,当一个集合只包含整数值的元素,并且这个集合的元素数量不多时,redis会使用整数集合作为集合键的底层实现 ...

随机推荐

  1. ArcGIS API for Silverlight中专题地图的实现浅析

    原文http://www.gisall.com/html/32/7232-2418.html 专题地图是突出表现特定主题或者属性的地图.常见专题地图类型有唯一值渲染,分类渲染,柱状图,饼状图,点密度图 ...

  2. Linux和windows动态库

    转载:http://www.cnblogs.com/chio/archive/2008/11/13/1333119.html 态链接库技术实现和设计程序常用的技术,在Windows和Linux系 统中 ...

  3. java 下拉框级联及相关(转)

    ActionLintsner都实现此接口,其它监听器可以监听的事件都可以被它捕获 public interface ActionListener extends EventListenerThe li ...

  4. 简单了解下Dubbo

    1. Dubbo是什么? Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案.简单的说,dubbo就是个服务框架,如果没有分布式的需求,其实是不需 ...

  5. 电子科大POJ "3*3矩阵的乘法"

    3阶矩阵的乘法 Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) c-source ...

  6. Extjs实现进度条

    做Extjs开发中,往往后台程序可能要执行一段时间才能得到返回结果,加入进度条可以提高客户体验度,以下为两种便捷的方式: 1.提交数据前用Ext.Msg.wait('提示','正在处理数据,请稍候') ...

  7. #include<string.h>

    #include<string.h> 1 strcpy #include <string.h> char *strcpy(char *str1, const char *str ...

  8. Can you find it?(二分 二分+STL set map)

    Can you find it? Time Limit : 10000/3000ms (Java/Other)   Memory Limit : 32768/10000K (Java/Other) T ...

  9. HDU 4508 湫湫系列故事——减肥记I(全然背包)

    HDU 4508 湫湫系列故事--减肥记I(全然背包) http://acm.hdu.edu.cn/showproblem.php?pid=4508 题意: 有n种食物, 每种食物吃了能获得val[i ...

  10. Object-c学习之路九(字典(NSDictionary&NSMutableDictionary))

    字典的练习和使用(遍历,搜索...)(Student和Book类文件可以查看上篇博客这次不上传了.) // // main.m // NSDictionary // // Created by Wil ...