react-router 的实现原理
2019-06-16 本文已影响0人
一瓣山河
理解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() 重新渲染
参考：
