React Router中的核心history库的详细分析

const history = {    length,        // 属性，history中记录的state的数量    action,        // 属性，当前导航的action类型    location,      // 属性，location对象，封装了pathname、search和hash等属性    push,          // 方法，导航到新的路由，并记录在history中    replace,       // 方法，替换掉当前记录在history中的路由信息    go,            // 方法，前进或后退n个记录    goBack,        // 方法，后退    goForward,     // 方法，前进    canGo,         // 方法，是否能前进或后退n个记录    block,         // 方法，跳转前让用户确定是否要跳转    listen         // 方法，订阅history变更事件  };

const history = {    length,         // 属性，history中记录的state的数量    state,          // 属性，pushState和replaceState时传入的对象    back,           // 方法，后退    forward,        // 方法，前进    go,             // 方法，前进或后退n个记录    pushState,      // 方法，导航到新的路由，并记录在history中    replaceState    // 方法，替换掉当前记录在history中的路由信息}// 订阅history变更事件window.onpopstate = function (event) {    ...}

// 构造hashHistory对象const createHashHistory = (props = {}) => {    ...    const globalHistory = window.history;    // 引用HTML5 history对象    ...    // transitionManager负责控制是否进行跳转，以及跳转后要通知到的订阅者，后面会详细讨论    const transitionManager = createTransitionManager();    ...    // 注册history变更回调的订阅者    const listen = listener => {        const unlisten = transitionManager.appendListener(listener);        checkDOMListeners(1);        return () => {            checkDOMListeners(-1);            unlisten();        };    };        // 监听hashchange事件    const checkDOMListeners = delta => {        listenerCount += delta;        if (listenerCount === 1) {            window.addEventListener(HashChangeEvent, handleHashChange);        } else if (listenerCount === 0) {            window.removeEventListener(HashChangeEvent, handleHashChange);        }    };        // hashchange事件回调    const handleHashChange = () => {        ...        // 构造内部使用的location对象，包含pathname、search和hash等属性        const location = getDOMLocation();            ...        handlePop(location);    };        // 处理hash变更逻辑    const handlePop = location => {        ...        const action = "POP";        // 给用户展示确认跳转的信息（如果有的话），确认后通知订阅者。如果用户取消跳转，则回退到之前状态        transitionManager.confirmTransitionTo(location, action, getUserConfirmation, ok => {            if (ok) {                setState({action, location});    // 确认后通知订阅者            } else {                revertPop(location);             // 取消则回退到之前状态            }        });    };        // 更新action，location和length属性，并通知订阅者    const setState = nextState => {        Object.assign(history, nextState);        history.length = globalHistory.length;        transitionManager.notifyListeners(history.location, history.action);    };    ...}