学习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
)
}
}
}
}