本篇文章将对react-router中剩余的组件进行源码分析
<Redirect>
和其他的路由组件一样, <Redirect>
使用<RouterContext.Consumer>
接收路由数据;
定义<Redirect>
的prop-types
Redirect.propTypes = {
push: PropTypes.bool,
from: PropTypes.string,
to: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired
};
<Redirect>
的渲染逻辑
首先通过传入的push
确定<Redirect>
的跳转方式是push还是replace:
// push为props.push, 默认为false
const method = push ? history.push : history.replace;
接着确定跳转的location
: createLocation
为history
库的方法, 会根据传入的参数创建一个location
对象:
// to为props.to, computedMatch为props.computedMatch
const location = createLocation(
computedMatch
? typeof to === "string"
? generatePath(to, computedMatch.params)
: {
...to,
pathname: generatePath(to.pathname, computedMatch.params)
}
: to
);
注:
- 当
<Redirect>
作为<Switch>
的子组件并被匹配时,<Switch>
将会将匹配计算得出的computedMatch
传给<Redirect>
generatePath
是react-router提供的一个api, 用于将path和parameters组合生成一个pathname
接下来就是<Redirect>
跳转逻辑实现:
<Lifecycle
onMount={() => {
method(location);
}}
onUpdate={(self, prevProps) => {
const prevLocation = createLocation(prevProps.to);
if (
!locationsAreEqual(prevLocation, {
...location,
key: prevLocation.key
})
) {
method(location);
}
}}
to={to}
/>
<Lifecycle>
组件结构非常简单, 支持传入onMount
, onUpdate
以及onUnmount
三个方法, 分别代表着componentDidMount
, componentDidUpdate
, componentWillUnmount
;
因此<Redirect>
使用Lifecycle
触发的动作如下:
<Redirect>
在componentDidMount
生命周期中进行push/replace跳转;- 在
componentDidUpdate
生命周期中使用history
库的locationsAreEqual
方法, 比较上一个location和新的location是否相同, 若是location不相同, 则执行push/replace跳转事件;
// LifeCycle.js
import React from "react";
class Lifecycle extends React.Component {
componentDidMount() {
if (this.props.onMount) this.props.onMount.call(this, this);
}
componentDidUpdate(prevProps) {
if (this.props.onUpdate) this.props.onUpdate.call(this, this, prevProps);
}
componentWillUnmount() {
if (this.props.onUnmount) this.props.onUnmount.call(this, this);
}
render() {
return null;
}
}
export default Lifecycle;
<Link>
<Link>
实现了react-router中路由跳转;
定义<Link>
的prop-types
const toType = PropTypes.oneOfType([
PropTypes.string,
PropTypes.object,
PropTypes.func
]);
const refType = PropTypes.oneOfType([
PropTypes.string,
PropTypes.func,
PropTypes.shape({ current: PropTypes.any })
]);
Link.displayName = "Link";
Link.propTypes = {
innerRef: refType,
onClick: PropTypes.func,
replace: PropTypes.bool,
target: PropTypes.string,
to: toType.isRequired
};
实际上<Link>
还有一个prop: component
, 但不清楚这里为什么不对component
进行类型声明;
<Link>
的渲染逻辑
<Link>
使用<RouterContext.Consumer>
接收路由信息;
<Link>
通过对props.to
进行处理, 得出href
属性, 声明props
对象:
(
{
component = LinkAnchor,
replace,
to,
innerRef, // TODO: deprecate
...rest
}
) => {
// ... 通过处理props.to得出href
const props = {
...rest,
href,
navigate() {
const location = resolveToLocation(to, context.location);
const method = replace ? history.replace : history.push;
method(location);
}
};
// ...
}
并将上面得出的props
注入component
中:
return React.createElement(component, props);
从源码可以看到, 此处的component
默认为LinkAnchor
, 因此我们来阅读以下<LinkAnchor>
的源码:
LinkAnchor
的props结构如下:
{
innerRef, // TODO: deprecate
navigate,
onClick,
...rest
}
主要是navigate
以及onClick
:
navigate
从<Link>
源码中可以看到, 主要是通过传入的replace
属性判断跳转类型, 根据对应跳转类型选择history.replace
或是history.push
进行路由跳转:
navigate() {
const location = resolveToLocation(to, context.location);
const method = replace ? history.replace : history.push;
method(location);
}
onClick
更好理解, 是<Link>
组件的点击事件声明;
<LinkAnchor>
通过传入的props生成了一个props
, 并返回一个注入了props
的超链接:
let props = {
// ...
};
return <a {...props} />;
主要功能实现在于超链接的onClick
, 点击事件中首先判断是否存在props.onClick
, 存在的话则立即执行; 接着进行是否执行props.navigate
的判断:
是否进行跳转需要满足以下所有条件:
event.button === 0
: 点击事件为鼠标左键;!target || target === "_self"
:_target
不存在, 或者_target
为_self
;!isModifiedEvent(event)
: 点击事件发生时未有其他按键同时按住;注:
isModifiedEvent
用于判断点击事件发生时是否有其他按键同时按住;
if (
!event.defaultPrevented && // onClick prevented default
event.button === 0 && // ignore everything but left clicks
(!target || target === "_self") && // let browser handle "target=_blank" etc.
!isModifiedEvent(event) // ignore clicks with modifier keys
) {
// ...
}
满足以上所有条件时执行以下代码:
event.preventDefault();
navigate();
event.preventDefault()
阻止超链接默认事件, 避免点击<Link>
后重新刷新页面;
navigate()
使用history.push
或history.replace
进行路由跳转, 并触发<Router>
中声明的history
监听事件, 重新渲染路由组件!
withRouter
定义withRouter
的prop-types
wrappedComponentRef
使得高阶组件能够访问到它包裹组件的ref
;
C.propTypes = {
wrappedComponentRef: PropTypes.oneOfType([
PropTypes.string,
PropTypes.func,
PropTypes.object
])
};
withRouter
的渲染逻辑
withRouter
是一个高阶组件, 支持传入一个组件, 返回一个能访问路由数据的路由组件, 实质上是将组件作为<RouterContext.Consumer>
的子组件, 并将context
的路由信息作为props
注入组件中;
const C = props => {
// ...返回组件
const { wrappedComponentRef, ...remainingProps } = props;
return (
<RouterContext.Consumer>
{context => {
return (
<Component
{...remainingProps}
{...context}
ref={wrappedComponentRef}
/>
);
}}
</RouterContext.Consumer>
);
};
return hoistStatics(C, Component);
hoistStatics
是三方库hoist-non-react-statics
, 用于解决高阶组件中原组件static丢失的问题; 同时使用支持传入props: wrappedComponentRef
, wrappedComponentRef
绑定原组件的ref
, 因此可以通过wrappedComponentRef
访问到原组件; 需要注意的是, 函数式组件没有ref
, 因为函数式组件并没有实例, 所以使用withRouter
包裹函数式组件时, 不支持使用wrappedComponentRef
访问原组件!
Hooks
react-router提供了一些hooks, 让我们可以在组件中获取到路由的状态并且执行导航; 如果需要使用这些钩子, 我们需要使用React >= 16.8
;
react-router的hooks实际上是利用React提供的hooks: useContext
, 让我们可以在组件中访问到HistoryContext
以及RouterContext
中的数据;
useHistory
import React from 'react';
import HistoryContext from "./HistoryContext.js";
const useContext = React.useContext;
export function useHistory() {
return useContext(HistoryContext);
};
useLocation
import React from 'react';
import RouterContext from "./RouterContext.js";
const useContext = React.useContext;
export function useLocation() {
return useContext(RouterContext).location;
};
useParams
import React from 'react';
import RouterContext from "./RouterContext.js";
const useContext = React.useContext;
export function useParams() {
const match = useContext(RouterContext).match;
return match ? match.params : {};
};
useRouteMatch
import React from 'react';
import RouterContext from "./RouterContext.js";
import matchPath from "./matchPath.js";
const useContext = React.useContext;
export function useRouteMatch(path) {
const location = useLocation();
const match = useContext(RouterContext).match;
return path ? matchPath(location.pathname, path) : match;
}
注:
- useRouteMatch使用hook:
useLocation
, 去获取location; - matchPath是react-router的一个公共api, 支持传入一个
pathname
以及path
, 若是path
与pathname
匹配则返回一个match
对象, 不匹配则返回一个null
;
结尾
从源码对react-router v5进行原理分析系列到此结束, 实际上还有一些比较冷的组件没有进行源码阅读(挖个坑, 以后有空可以填);
仔细想想, 这还是第一次系统性地去阅读一个高星的库, 这次源码阅读让我觉得受益匪浅, 对比一下自己写的库, 不管是从设计还是总体封装都是差了十万八千里(笑, 还得努努力;
作者之前是偏向vue, 因为最近开始系统性地学React, 所以想趁着学习的热情, 把React一些高星的库挖挖, 看看能不能从源码中理解到一些react开发中的小技巧或是设计思想, 所以目的是达到了;
感慨一下: React的生态是真的繁荣, 基础库也是多到眼花缭乱, 其实在我看来这也算个小缺点, 因为工具的多样化有可能会出现以下问题: 因为开发过程中没沟通好, 导致项目中引入多个相同的库, 目前维护的平台确实有这种问题, 以前的开发也是百花齐放呢(怒;
在这里抛出一个问题呀:
在react中, 我可以通过这么写去覆盖组件的props:
const props = {
title: '新标题'
};
<Component title="旧标题" {...props}></Component>
而在vue中用以下的写法却不能覆盖之前组件的props:
<template>
<Component title="旧标题" v-bind="{title: '新标题'}"></Component>
</template>
有看过vue源码的兄台来解答一下疑惑吗? 那么接下来的目标就是去看看vue的源码啦!