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