• React框架核心原理


    一、整体架构

    三大核心库与对应的组件

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

    • react-router 可视为react-router-dom 的核心,里面封装了>等核心组件,实现了从路由的改变到组件的更新的核心功能。以及配套方法、hook。这部分只和 react 有关,和宿主无关,像 在初始化的时候,必须手动传入宿主对 history api 的实现。
    • react-router-dom 则是 react-router 在浏览器宿主下的更上一层封装。把浏览器 history api 传入 并初始化成 ,补充了 这样给浏览器直接用的组件。同时把 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>

     

  • 相关阅读:
    Linux守护进程
    【历史上的今天】4 月 28 日:人工智能理论之父出生;大众点评上线;苹果开设 iTunes 音乐商店
    5米DEM高程数据分析和对比
    【COMP305 LEC6 LEC 7】
    决策树(上):数据挖掘十大算法之一
    UE——导航系统(NavigationSystem)
    蚂蚁集团首次披露数字科技业务海外发展数据 营收规模同比增长300%
    NIFI同步API接口数据
    Java中的Servlet
    linux 使用crontab 创建定时任务
  • 原文地址:https://blog.csdn.net/m0_61843855/article/details/133561068