正式学习React (七) react-router 源码分析

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