ReactRouter的实现 (2)

我们可以看一下ReactRouter的实现，commit id为eef79d5，TAG是4.4.0，在这之前我们需要先了解一下history库，history库，是ReactRouter依赖的一个对window.history加强版的history库，其中主要用到的有match对象表示当前的URL与path的匹配的结果，location对象是history库基于window.location的一个衍生。
ReactRouter将路由拆成了几个包: react-router负责通用的路由逻辑，react-router-dom负责浏览器的路由管理，react-router-native负责react-native的路由管理。
我们以BrowserRouter组件为例，BrowserRouter在react-router-dom中，它是一个高阶组件，在内部创建一个全局的history对象，可以监听整个路由的变化，并将history作为props传递给react-router的Router组件，Router组件再会将这个history的属性作为context传递给子组件。

// packages\react-router-dom\modules\HashRouter.js line 10 class BrowserRouter extends React.Component { history = createHistory(this.props); render() { return <Router history={this.history} children={this.props.children} />; } }

接下来我们到Router组件，Router组件创建了一个React Context环境，其借助context向Route传递context，这也解释了为什么Router要在所有Route的外面。在Router的componentWillMount中，添加了history.listen，其能够监听路由的变化并执行回调事件，在这里即会触发setState。当setState时即每次路由变化时 -> 触发顶层Router的回调事件 -> Router进行setState -> 向下传递 nextContext此时context中含有最新的location -> 下面的Route获取新的nextContext判断是否进行渲染。

// line packages\react-router\modules\Router.js line 10 class Router extends React.Component { static computeRootMatch(pathname) { return { path: "http://www.likecs.com/", url: "http://www.likecs.com/", params: {}, isExact: pathname === "http://www.likecs.com/" }; } constructor(props) { super(props); this.state = { location: props.history.location }; // This is a bit of a hack. We have to start listening for location // changes here in the constructor in case there are any <Redirect>s // on the initial render. If there are, they will replace/push when // they mount and since cDM fires in children before parents, we may // get a new location before the <Router> is mounted. this._isMounted = false; this._pendingLocation = null; if (!props.staticContext) { this.unlisten = props.history.listen(location => { if (this._isMounted) { this.setState({ location }); } else { this._pendingLocation = location; } }); } } componentDidMount() { this._isMounted = true; if (this._pendingLocation) { this.setState({ location: this._pendingLocation }); } } componentWillUnmount() { if (this.unlisten) this.unlisten(); } render() { return ( <RouterContext.Provider children={this.props.children || null} value={{ history: this.props.history, location: this.state.location, match: Router.computeRootMatch(this.state.location.pathname), staticContext: this.props.staticContext }} /> ); } }