react-router 的API及原理

1. <BrowserRouter>包裹整个App系统

2. Route匹配相应的location的地址，匹配成功后渲染组件

3. Link决定的是如何在页面内改变url，点击后会传一个prop给组件

react-router主要是通过html5的history

function createHistory(options={}) {

…

return {

listenBefore, // 内部的hook机制，可以在location发生变化前执行某些行为，AOP的实现

listen, // location发生改变时触发回调

transitionTo, // 执行location的改变

push, // 改变location

replace,

go,

goBack,

goForward,

createKey, // 创建location的key，用于唯一标示该location，是随机生成的

createPath,

createHref,

createLocation, // 创建location

}

}

Router

摘录核心代码

class Router extends React.Component {

static computeRootMatch(pathname) {

return { path: “/”, url: “/”, params: {}, isExact: pathname === “/” };

}

constructor(props) {

super(props);

this.state = {

location: props.history.location

};

//判断是否挂载组件，挂载后变为true

this._isMounted = false;

//

this._pendingLocation = null;

/*外层组件调用Router时默认传递props

props：staticContext：

history：当前所在的路由

children：孩子组件

*/

if (!props.staticContext) {

/*

只要不是静态路由，则会对location进行监听，

只要location发生变化，就会调用listen方法，内部调用setState更新路由。

*/

this.unlisten = props.history.listen(location => {

if (this._isMounted) {

this.setState({ location });

} else {

this._pendingLocation = location;

}

});

}

}

componentDidMount() {

this._isMounted = true;

if (this._pendingLocation) {

this.setState({ location: this._pendingLocation });

}

}

componentWillUnmount() {

if (this.unlisten) this.unlisten();

}

render() {

return (

<RouterContext.Provider

基础学习：

前端最基础的就是 HTML , CSS 和 JavaScript 。

网页设计：HTML和CSS基础知识的学习

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

为表现。

[外链图片转存中…(img-IIvxhhqa-1718808950711)]

动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。