前言
本系列將會根據一個簡單的專案來學習React-Router 原始碼，要到達的目的有如下：
- 學會使用React-Router
- 在使用的基礎上，分析React-Router 原始碼結構
可以下載專案原始碼,並按照如下步驟，將專案執行起來
git clone git@github.com:bluebrid/react-router-learing.git
npm i
npm start
執行的專案只是一個簡單的React-Router 專案。
我們通過應用，一步步去解析React-Router 原始碼.
查詢入口檔案
在我們clone 專案後，我們先找到入口檔案， 也就是src/index 檔案
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>
, document.getElementById('root'));
複製程式碼其實很簡單，就是React 的入口檔案寫法，ReactDOM.render 去Render 整個頁面，但是我們發現一個問題，Render 的根元件是一個BrowserRouter 元件，檢視其import 路徑import { BrowserRouter } from './react-router/packages/react-router-dom/modules';, 發現其實React-Router 的一個元件，也就是我們學習React-Router 的入口檔案，下面我們就來分析這個元件。
BrowserRouter
檢視原始碼，發現這個元件，只是重新render 了Router元件， 但是傳了一個history 的props. history 是一個獨立的第三方庫，是實現路由的一個關鍵所在，我們後續會深入分析它.
import { createBrowserHistory as createHistory } from "../../../../history/modules";
複製程式碼history = createHistory(this.props);
複製程式碼 render() {
return <Router history={this.history} children={this.props.children} />;
}
複製程式碼因為React-Router 是基於history這個庫，來實現對路由變化的監聽，所以我們先對這個庫進行簡單的分析.
history(第三方庫)
- 我們檢視modules下面的index.js 的原始碼，可以看出history 暴露出了七個方法:
import createBrowserHistory from "./createBrowserHistory";
import createHashHistory from "./createHashHistory";
import createMemoryHistory from "./createMemoryHistory";
import { createLocation, locationsAreEqual } from "./LocationUtils";
import { parsePath, createPath } from "./PathUtils";
export {
createBrowserHistory,
createHashHistory,
createMemoryHistory,
createLocation,
locationsAreEqual,
parsePath,
createPath
}
複製程式碼我們上一節分析BrowserRouter , 其history 引用的是 createBrowserHistory 方法，所以我們接下來主要分析這個方法.
history(createBrowserHistory.js)
如果我們用VS Code 開啟原始碼，我們可以用Ctrl + k Ctrl + 0(數字0) 組合鍵，我們可以檢視這個檔案原始碼結構.
這個檔案暴露出了一個物件, 也就是我們可以用的方法:
const history = {
length: globalHistory.length,
action: "POP",
location: initialLocation,
createHref,
push,
replace,
go,
goBack,
goForward,
block,
listen
};
複製程式碼我們接下來我們會分析其中幾個重要的方法
listen
listen 是一個最主要的方法，在Router 元件中有引用，其是實現路由監聽的功能，也就是觀察者 模式.下面我們來分析這個方法:
const listen = listener => {
const unlisten = transitionManager.appendListener(listener);
checkDOMListeners(1);
return () => {
checkDOMListeners(-1);
unlisten();
};
};
複製程式碼其中checkDOMListeners 方法，是真正實現了路由切換的事件監聽：
//註冊路由監聽事件
const checkDOMListeners = delta => {
// debugger
listenerCount += delta;
if (listenerCount === 1) {
window.addEventListener(PopStateEvent, handlePopState);
if (needsHashChangeListener)
window.addEventListener(HashChangeEvent, handleHashChange);
} else if (listenerCount === 0) {
window.removeEventListener(PopStateEvent, handlePopState);
if (needsHashChangeListener)
window.removeEventListener(HashChangeEvent, handleHashChange);
}
};
複製程式碼其中window 監聽了兩種事件: popstate 和hashchange,這兩個事件都是HTML5中的API，也就是原生的監聽URL變化的事件.
分析事件監聽的回撥函式handlePopState ,其最終是聽過setState 來出發路由監聽者，
const setState = nextState => {
Object.assign(history, nextState);
history.length = globalHistory.length;
transitionManager.notifyListeners(history.location, history.action);
};
複製程式碼其中notifyListeners 會呼叫所有的listen 的回撥函式，從而達到通知監聽路由變化的監聽者
在下面的Router 元件的componentWillMount 生命週期中就呼叫了history.listen呼叫，從而達到當路由變化， 會去呼叫setState 方法， 從而去Render 對應的路由元件。
Router
- 我先檢視render 方法
render() {
const { children } = this.props;
return children ? React.Children.only(children) : null;
}
複製程式碼很簡單，只是將chiildren 給render 出來
- 我們接下來分析這個元件的所有的生命週期函式
- componentWillMount
componentWillMount() {
const { children, history } = this.props;
this.unlisten = history.listen(() => {
this.setState({
match: this.computeMatch(history.location.pathname)
});
});
}
複製程式碼在這個方法中，註冊了對history 路由變更的監聽，並且在監聽後去變更狀態
- componentWillUnmount
componentWillUnmount() {
this.unlisten();
}
複製程式碼當元件解除安裝時，登出監聽.
由此分析，Router最主要的功能就是去註冊監聽history 路由的變更，然後重新render 元件。
分析到此，我們發現跟React-Router已經斷開了聯絡，因為後面所有的事情都是去render children, 我們接下來繼續返回到index.js檔案中:
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>
, document.getElementById('root'));
複製程式碼我們發現children 就是<App/>元件了，我們去檢視APP的程式碼，還是先檢視render：
class App extends Component {
render() {
return (
<div>
<nav className="navbar navbar">
<ul className="nav navbar-nav">
<li><Link to="/">Homes</Link></li>
<li><Link to="/category">Category</Link></li>
<li><Link to="/products">Products</Link></li>
<li><Link to="/admin">Admin area</Link></li>
</ul>
</nav>
<Switch>
<Route path="/login" render={(props) => <Login {...props} />} />
<Route exact path="/" component={Home}/>
<Route path="/category" component={Category}/>
<PrivateRoute path='/admin' component = {Admin} />
<Route path="/products" component={Products}/>
</Switch>
</div>
);
}
}
複製程式碼非常顯眼的是:Switch 元件，經檢視是React-Router 的一個元件，我們接下來就分析Switch元件
Switch
render() {
const { route } = this.context.router;
const { children } = this.props;
const location = this.props.location || route.location;
let match, child;
React.Children.forEach(children, element => {
if (match == null && React.isValidElement(element)) {
const {
path: pathProp,
exact,
strict,
sensitive,
from
} = element.props;
const path = pathProp || from;
child = element;
match = matchPath(
location.pathname,
{ path, exact, strict, sensitive },
route.match
);
}
});
return match
? React.cloneElement(child, { location, computedMatch: match })
: null;
}
複製程式碼其中最明顯的一塊程式碼就是: React.Children.forEach ， 去遍歷Switch 下面的所有的children, 然後根據path 去匹配對應的children, 然後將匹配到的children render 出來。
而Switch 的所有的Children 是一個Route 元件，我們接下來就要分析這個元件的原始碼
Switch 的主要功能就是根據path 匹配上對應的children, 然後去Render 一個元素React.cloneElement(child, { location, computedMatch: match })
Route
從app.js 中，發現 Route 使用方式是<Route exact path="/" component={Home}/>
render() {
const { match } = this.state;
const { children, component, render } = this.props;
const { history, route, staticContext } = this.context.router;
const location = this.props.location || route.location;
const props = { match, location, history, staticContext };
if (component) return match ? React.createElement(component, props) : null;
if (render) return match ? render(props) : null;
if (typeof children === "function") return children(props);
if (children && !isEmptyChildren(children))
return React.Children.only(children);
return null;
}
複製程式碼從render 方法可以知道，其中有三個重要props, 決定了怎麼去render 一個路由。
- component (直接傳遞一個元件， 然後去render 元件)
- render (render 是一個方法， 通過方法去render 這個元件)
- children (如果children 是一個方法， 則執行這個方法， 如果只是一個子元素，則直接render 這個元素)
在render元件的時候，都會將props 傳遞給子元件
props = {match, location, history, staticContext} 這些屬性在元件中會有很大的用途
使用方式
從上面的程式碼可以發現Route的使用方式有四種:
<Route exact path="/" component={Home}/>直接傳遞一個元件<Route path="/login" render={(props) => <Login {...props} />} />使用render 方法<Route path="/category"> <Category/><Route/><Route path="/category" children={(props) => <Category {...props} />} />跟render 使用方式一樣
props(引數)
上面我們已經分析了render 方法，我們現在需要分析props, 因為理解了render 方法，也就是知道這個元件的實現原理， 理解了props, 就會理解這個元件可以傳遞哪些屬性，從而可以達到更好的使用Route元件.
static propTypes = {
computedMatch: PropTypes.object, // private, from <Switch>
path: PropTypes.string,
exact: PropTypes.bool,
strict: PropTypes.bool,
sensitive: PropTypes.bool,
component: PropTypes.func,
render: PropTypes.func,
children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
location: PropTypes.object
};
複製程式碼下面我們一一來分析這些屬性的用途:
- path 很簡單，就是一個字串型別，也就是我們這個路由要匹配的的URL路徑.
- component, 居然是個func 型別， 我們上面分析render 方法，發現conponent 傳遞的是一個元件.其實React component 其實就是一個function .不管是Class component 或者是一個函式式元件，其實說白了都是function(typeof App === 'function')
- render, 上面在render 方法也已經分析，其實是通過一個function 來render 一個元件
- children 上面render 方法也已經分析了
- computedMatch 是從Switch 傳遞過來的，就是Switch 元件已經找到對應的match.這個也是Switch 元件的主要功能， 就是用Swtich 包裹所有的Route 元件，在Switch 中已經查詢到對應的Route元件了， 不用將Switch 下面的所有的Route 去Render一遍了。也是效能提升的一個方式。
上面我們已經分析了我們使用過的四個props, 我們接下來分析我們沒有使用過的幾個props,但是其實在特殊環境中是很有作用:
- exact 從字面意義上理解是“精確的”，也就是要精確去匹配路徑， 舉個例子:
<Switch>
<Route path="/login" render={(props) => <Login {...props} />} />
<Route path="/" component={Home}/>
<Route path="/category" children={(props) => <Category {...props} />} />
<PrivateRoute path='/admin' component = {Admin} />
<Route path="/products" component={Products}/>
</Switch>
複製程式碼上面"/" 路徑會匹配所有的路徑如果:/login /category ...., 但是我們需要"/" 只匹配 Home , 我們需要變更如:<Route exact path="/" component={Home}/>
- strict 從字面上理解是“嚴格的”,也就是嚴格模式匹配,對後面的"/" 也是需要匹配上的， 如:
<Route strict path="/one/" component={About}/>只會匹配/one/ 或者/one/two 不會匹配 /one - sensitive 用來設定path 匹配是否區分大小寫，如果設定了這個值，是區分大小寫的，如:
<Route sensitive path="/one" component={About}/>只會匹配/one 不會匹配/One or /ONe - location
- computedMatch, 是一個私有的屬性，我們不會使用
Route 元件最主要的功能，是匹配URL 然後render出元件， 其中匹配的邏輯是是其核心的功能，我們後續會分析其匹配的過程,原始碼.
Link
TODO......