react-router 的实现原理

理解react-router 的实现思路， 大概分为两部分：

• 分析react-router 引入的依赖history
• 分析react-router 是如何实现URL 与 UI 同步的

History

URL 与 UI 同步

从组件层面描述实现过程，react-router 中有几个重要的组件： Router, Route, RouterContext。

实现思路：

• 内部维护一个RouterContext(依赖create-react-context)， 提供两个类RouterContext.Provider、RouterContext.Consumer, 进行history, location, match, staticContext 的传递和更新
• Router组件是通过ReactContext.Provider 实现的，给Router 注入history, location, match, staticContext 属性，Router注册了history.listen事件监测变化，location变化=> this.setState({location}) => RouterContext 变化
• Route组件是通过ReactContext.Consumer 实现的, ReactContext.Consumer 内部有自己的state, 当RouterContext的value变化时，就会触发setState, 导致Route重新渲染

create-react-context

• Provider与Consumer 通过Context 进行通信, Consumer中注册了update事件(Provider的childContext是通过EventEmitter实现的)，当Provider的value值发生变化时，就会调用update事件，重新获取属性值，并setState() 重新渲染

参考：

• create-react-context
• https://segmentfault.com/a/1190000004527878?utm_source=tag-newest