react

React生態漸進系列-React-Router

單頁應用(SPA)提到前端的路由就必須提到單頁應用,目前單頁應用已經慢慢深入到所有的專案中,除了以前老舊的專案...

>

單頁應用(SPA)

提到前端的路由就必須提到單頁應用,目前單頁應用已經慢慢深入到所有的專案中,除了以前老舊的專案,新的專案基本上都開始使用單頁應用.

什麼是單頁應用

單頁Web應用(single page web application,SPA),就是隻有一張Web頁面的應用,是載入單個HTML 頁面並在使用者與應用程式互動時動態更新該頁面的Web應用程式。

單頁應用的特點

  • 速度:更好的使用者體驗,讓使用者在web app感受native app的速度和流暢,

  • MVVM:經典MVVM開發模式,前後端各負其責。

  • ajax:重前端,業務邏輯全部在本地操作,資料都需要通過AJAX同步、提交。

  • 路由:在URL中改變瀏覽器路由,頁面並不會過載。

    單頁Web應用(single page web application,SPA)是當今網站開發技術的弄潮兒,很多傳統網站都在或者已經轉型為單頁Web應用,新的單頁Web應用網站(包括移動平臺上的)也如雨後春筍般涌現在人們的面前,如Gmail、Evernote、Trello等。如果你是一名Web開發人員,卻還沒開發過或者甚至是沒有聽說過單頁應用,那你已經Out很久了。 單頁Web應用和前端工程師們息息相關,因為主要的變革發生在瀏覽器端,用到的技術其實還是HTML+CSS+JavaScript,所有的瀏覽器都原生支援,當然有的瀏覽器因為具備一些高階特性,從而使得單頁Web應用的使用者體驗更上一層樓。關於單頁應用的優點和缺點,網上講解的文章有很多,這裏就不展開論述了。 單頁Web應用,顧名思義,就是隻有一張Web頁面的應用。瀏覽器一開始會載入必需的HTML、CSS和JavaScript,之後所有的操作都在這張頁面上完成,這一切都由JavaScript來控制。因此,單頁Web應用會包含大量的JavaScript程式碼,複雜度可想而知,模組化開發和設計的重要性不言而喻。

首先幫大家回顧一下單頁應用相關的知識,其中,路由在單頁應用扮演者非常重要的角色.

React-Router

接下來,就慢慢了解,React-Router是如何在專案中扮演路由控制器這一角色的.用法的話,可以去 React-Router官網 檢視詳細的用法,在這裏,講解的是具體實現.

React-Router是React官方推薦的路由元件.在經歷過3 => 4版本的顛覆性重構之後,變得非常的輕量簡介,和React的搭配更加的天衣無縫. React-Router目前分為React-Router和React-Router-Dom兩個庫,其意義和React以及React-Dom有著異曲同工之妙,React-Router是一種路由渲染的思想,React-Router便將路由渲染和DOM結合起來,來渲染我們的單頁應用,所以我們直接來看一下React-Router-DOM的實現.

img

一共就只有這些元件,接下來我們來結合用法一個一個分析:

BrowserRouter,HashRouter

import { BrowserRouter } from 'react-router-dom'
ReactDOM.render((
  <BrowserRouter>
    <App/>
  </BrowserRouter>
), contianer)

這兩個元件為我們提供了全域性元件的history方法,當我們用這兩個元件,之後就可以使用路由物件history. 可以看一下history物件的具體實現:

import { createBrowserHistory as createHistory } from "history";

class BrowserRouter extends React.Component {
  ...
  history = createHistory(this.props);
  ...
  render() {
    return <Router history={this.history} children={this.props.children} />;
  }
}

history是由一個名字叫做history的包建立而來,而BrowserRouter和HashRouter的區別是,建立的是hash還是瀏覽器路徑. 具體history不做分析,簡單介紹一下browserHistory和HashRouter的區別.

這兩個都是路由,不過BrowserHistory是藉助瀏覽器的API.pushState和replaceState來操作路由,路由形式和正常的路由無異,hashRouter 是通過改變路由的hash值並且監聽hash變化,來改變路由.

Router

Router元件是React-Router的核心,他負責提供context來傳達全域性的router屬性.

getChildContext() {
    return {
      router: {
        ...this.context.router,
        history: this.props.history,
        route: {
          location: this.props.history.location,
          match: this.state.match
        }
      }
    };
  }

Route

Route元件是用的最多的元件,他表示一個路由元件,匹配渲染. 使用方法

<Router>
  <div>
    <Route exact path="/" component={Home}/>
    <Route path="/news" component={NewsFeed}/>
  </div>
</Router>

當符合其中的路由匹配規則,component元件便會被渲染出來,匹配機制在Route內部實現.

computeMatch(
    { computedMatch, location, path, strict, exact, sensitive },
    router
  ) {
    if (computedMatch) return computedMatch; // <Switch> already computed the match for us

    invariant(
      router,
      "You should not use <Route> or withRouter() outside a <Router>"
    );

    const { route } = router;
    const pathname = (location || route.location).pathname;

    return matchPath(pathname, { path, strict, exact, sensitive }, route.match);
    }

該方法會解析匹配規則,返回匹配值.

Switch

該元件會渲染第一個匹配的路由子元件, 核心程式碼如下:

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
    );
  }
});

上面便是React-Router在瀏覽器環境整個的工作過程.

Facebook Profile photo
Written by Nat
This is the author box. A short description about the author of this article. Could be their website link, what they like to read about and so on. Profile