React框架核心原理

一、整体架构

三大核心库与对应的组件

        history -> react-router -> react-router-dom

• react-router 可视为react-router-dom 的核心，里面封装了<Router>，<Route>，<Switch>等核心组件,实现了从路由的改变到组件的更新的核心功能。以及配套方法、hook。这部分只和 react 有关，和宿主无关，像 在初始化的时候，必须手动传入宿主对 history api 的实现。
• react-router-dom 则是 react-router 在浏览器宿主下的更上一层封装。把浏览器 history api 传入<Router> 并初始化成 <BrowserRouter>、<HashRouter>，补充了 <Link> 这样给浏览器直接用的组件。同时把 react-router 透传导出，减少开发者依赖。
• history 库可视为react-router的核心，也是整个路由原理的核心，里面集成了popState,history.pushState等底层路由实现的原理方法。给 browser、hash 两种 history 统一了 api，补充了订阅的能力，最终规范成 react-router 需要的接口供 react-router-dom 调用。

二、history库详解

模块划分：

• history 依赖 window.history API：用于同步的增删改查浏览器路由状态
• history 依赖 event listener 监听浏览器路由事件：用于处理自身状态和回调
• 转接层：实现 window.history.state 和自身 location 数据的双向转换
• location：history 维护的 location 数据，全局唯一
• 订阅池：自己实现了回调池子，通过 push、call 方法添加订阅和修改
• 路由方法：间接调用 window.history 的方法

主要调用逻辑：

• 初始化（执行 createBrowserHistory）：创建location、订阅池、方法；从 window.location、window.history 计算当前 location。
• 浏览器事件触发：重新计算当前 location；调订阅池 call 方法处理所有回调
• push、replace 方法被调用：根据调用入参生成新 location，并转为 history state，调 window.history 方法；调订阅池 call 方法处理所有回调.

三、路由流程分析：

当地址栏改变url，组件的更新渲染都经历了什么？😊😊😊 拿history模式做参考。当url改变，首先触发histoy，调用事件监听popstate事件， 触发回调函数handlePopState，触发history下面的setstate方法，产生新的location对象，然后通知Router组件更新location并通过context上下文传递，switch通过传递的更新流，匹配出符合的Route组件渲染，最后有Route组件取出context内容，传递给渲染页面，渲染更新。

在切换不同的组件中，有俩种方式，push和replace。

默认的是push，即每切换url，之前的路由仍然在history栈中。

如果切换默认使用的是replace，则当前的URL路由会替换掉栈顶的路由记录。

 <Link push = {true} to={{pathname:'/home/message/detail',state:{id:msgObj.id,title:msgObj.title}}}>{msgObj.title}</Link>