2020.09.21婆咸， 1. 復(fù)習(xí)了contextAPI（Provider/Consumer）；
2. 高階組件（傳入一個(gè)組件块差，返回一個(gè)新組件， 比如logger組件）憨闰，特別要注意的是靜態(tài)方法需五，可以通過繼承來保留之前的靜態(tài)方法， ref也比較特殊宏邮，可以通過逼得props來傳遞，比如重命名為myRef蜜氨，然后在源組件中通過props.myRef來獲取（ref是一個(gè)特殊的屬性埋哟，類似的有key，它們不在props中）
-
react-router-dom, react的路由庫赤赊，基本上是這樣的結(jié)構(gòu)：
import { HashRouter, Route, Link } from 'react-router-dom';
ReactDOM.render(
<HashRouter> /*路由的包裹容器*/
<>
<ul>
<li>
<Link to="/"></Link>
</li>
<li>
<Link to="/user"></Link>
</li>
<li>
<Link to="/profile"></Link>
</li>
</ul>
<Route path="/" component={Home} />
<Route path="/user" component={User} />
<Route path="/profile" component={Profile} />
</>
</HashRouter>,
document.getElementById('root')
);
-
path-to-regexp,這個(gè)包是用來匹配路由的煞赢，普通用法就只是匹配路由是否相等，稍微高階的照筑，就是取路徑參數(shù)（子組件中录豺，this.props.match.params.xxx） - 路由權(quán)限饭弓， 組件
Protected用來表示權(quán)限路由，(原理大約是： 當(dāng)路由渲染時(shí)弟断，路徑匹配到之后，先找組件的component屬性阀趴，能找到的話，就用component渲染棚菊，找不到的話叔汁，就找它的render屬性)
//Protected.js
import React from 'react';
export default (props) => {
let { path, component: RouteComponent } = props;
return (
<Route
path={path}
render={(props) =>
localStorage.getItem('logined') ? (
<RouteComponent {...props} />
) : (
<Redirect
to={{
pathname: '/login',
state: { from: props.location.pathname },
}}
/>
)
}
/>
);
};
- 渲染一個(gè)Route有三種方式
//優(yōu)先級 1>2>3
1. component 組件
2. render 函數(shù) （路徑匹配才渲染）
3. children 函數(shù) （不管路徑匹不匹配都渲染），應(yīng)用于MenuLink据块，如果路徑匹配的話，會有match另假，否則沒有match屬性
接下來，介紹children
import React from 'react';
import { Route, Link } from 'react-router-dom';
export default (props) => {
let { to, exact, children } = props;
return (
<Route
path={typeof to == 'object' ? to.pathname : to}
exact={exact}
children={(childProps) => ( //匹配到后己莺，給link加active類來得到高亮效果
<Link to={to} className={childProps.match ? 'active' : ''}>{children}</Link>;
)}
></Route>
);
};
- withRouter
withRouter可以講一個(gè)不在router系統(tǒng)中的組件戈轿，納入到router系統(tǒng)中。
實(shí)現(xiàn)原理如下：
import React from "react";
import {Route} from "./";
export default function(OldComponent) {
return () => <Route component={OldComponent}/>
}
//使用時(shí)
import React from "react";
import {withRouter} from "react-router-dom";
class Demo extends React.Component { //demo組件是脫離router系統(tǒng)的凶杖，因此款筑，它本來是不能使用history的
render (
return (
<div onClick={this.props.history.push('/')}>logo</div>
)
)
}
export default withRouter(Demo);
- browserRouter
browserRouter是瀏覽器路由，HashRouter是hash路由杈湾，HashRouter監(jiān)聽hashchange事件，browserRouter監(jiān)聽的是瀏覽器的popState和pushState漆撞。
