说说 React-Router 底层实现?- 面试进阶
React-Router 基本了解
对于 React-Router 是针对 React 定义的路由库,用于将 URL 和 component 进行匹配。
React-Router 源码分析
简单前端路由的实现
上面的路由系统主要由三部分组成
Router.protopyte.init 用于页面初始化(load)/页面 url 变化 的事件注册
Router.protopyte.route 对路径(address)和回调函数(function)的注册并存放于 Router 中,为 load/hashchange 使用
Router.protopyte.refresh 针对不同的路径(address)进行回调的处理
React-Router 简单实现
其实上诉的操作就是只是针对前端简单路由+historyModule 的升级处理。其中的操作也是类似的。
Router.init(historyModule) ==> Router.protopyte.init
Router.listen(function()) ==> Router.protopyte.route
Router.updateLocation ==> Router.protopyte.refresh
React-Router 代码实现分析
由于 React-Router 版本之间的处理方式有些差别,所以就按最新版本来进行分析。
historyModule(history)的实现
//这里针对react-router-dom中的BrowserRouter.js进行分析
追踪一下 history 的实现文件路径在源码中的 history 中 index.ts
除去 interface 这种类型,是不是对 History 中定义的属性有点熟悉。参考 前端react面试题详细解答
listen 函数的注册
React-Router/Router.js
上面需要有几处需要注意的地方
React-Router 是利用 React 的 Context 进行组件间通信的。childContextTypes/getChildContext
需要特别主要 componentWillMount,也就是说在 Router 组件还未加载之前,listen 已经被注册。其实这一步和第一个例子中的 init 道理是类似的。
在 componentWillUnmount 中将方法进行注销,用于内存的释放。
这里提到了 ,其实就是 用于 url 和组件的匹配。
了解 Redirect.js
react-router/Redirect.js
note :
针对 h5 的 history 来讲,push/replace 只是将 url 进行改变,但是不会触发 popstate 事件
generatePath 函数的处理
针对路径进行页面渲染处理
需要看一个 Router 的结构
看一下 Route 对组件的处理
Buzzer
针对 React-Router 来讲,其实就是对 H5 的 History 进行了一次封装,使能够识别将 url 的变化与 componet 渲染进行匹配。
根据 BrowserRouter 等不同的 API 针对 H5 的 history 的重构
结构的构建,同时对 history 属性进行注册。
在 Router 的 componentWillMount 中注册 history 的事件回调。
在 Redirect 中进行路径的计算,调用 history.push/history.replace 等更新 history 信息。
Route 中根据计算的匹配结果,进行页面首次渲染/页面更新渲染处理。
评论