React-Router V4 簡單實現

React-Router V4 簡單實現

據說V4終於發佈了，本文是在閱讀RRV4時作的一點小總結

在此對React-Router4.0版本中重要的幾個組件作簡單的實現。

Match組件

Match組件的做用很簡單，就是基於url地址來判斷是否渲染對應組件。

使用方式：

<Match pattern='/test'component={Component} />複製代碼

###基本原理實現：

import React from 'react';

const Match = ({ pattern, component: Component }) => {
  const pathname = window.location.pathname;
  if (pathname.match(pattern)) {
    // 此處使用match方法對url地址進行解析是遠遠不夠的！
    return (
      <Component /> ); } else { return null; } }複製代碼

Match能夠提取出URL中全部動態參數，而後將他們以傳入到對應的組件。

Link組件

Link組件其實就是對<a>標籤的封裝。它會禁止掉瀏覽器的默認操做，經過history的API更新瀏覽器地址。

###使用方法

<Link to="/test" > To Test</Link>複製代碼

基本實現原理

import createHistory from 'history/createBroserHistory';
const history = createHistory();

// Link組件由於不須要維持自身數據，所以咱們在此可使用無狀態(stateless)函數
const Link = ({ to, children }) => {
    <a
      onClick={(e) => 
        e.preventDefault();
        history.push(to)
      }
      href={to}
    >
      {children}
    </a>
  }複製代碼

如上面代碼所示，當咱們點擊a標籤的時候。首先會禁止瀏覽器的默認行爲，而後會調用history.push的API接口更新URL的地址。

你可能會有疑問，既然經過點擊就能更新URL地址了，那咱們還設置a標籤的href屬性有何用呢？事實上的確沒什麼用處，但本着體驗最優這一原則咱們仍須要設定該屬性，當用戶將鼠標懸停在標籤上時可以預覽連接地址和右擊複製連接。

React-Router的做用是在URL更改的時候，顯示對應的URL的SPA組件。所以當咱們點擊Link組件更新URL時，須要同時更新到對應的組件。history爲咱們提供了相應的監聽方法來監聽URL變化。

class App extends React.Component {
  componentDidMount() {
    history.listen(() => this.forceUPdate())
  }
  render(){
    return (
  
  
  

 

  
  App 

 
);
  }
}複製代碼

Link晉級版本

咱們但願可以根據給該組件傳入更多參數。例如:

1. 當前URL爲激活狀態時，但願可以顯示特別的樣式
2. 如同普通a標籤同樣，居有target屬性可以在另外一個新頁面來顯示.
3. 傳入特別的參數,給對應URL下組件使用，如query。

function resolveToLocation(to, router) {
  return 
    typeof to === 'function' ? to(router.location) : to
}
function isEmptyObject(object) {
  for (const p in object)
    if (Object.prototype.hasOwnProperty.call(object, p))
      return false

  return true
}
class Link extends React.Component {
  //此次要根據React-Router寫個相對簡單，但功能更全的版本
  handleClick(e) {
    // 若是有自定義的點擊處理，就用該方法
    if (this.props.onClick) {
      this.props.onClick();
    }
    // 若是設定了target屬性，就使用瀏覽器默認方式來處理點擊
    if (this.props.target) {
      return;
    }
    e.preventDefault();
    history.push(resolveToLocation(to));
  }
  render() {
    const { to, activeClassName, activeStyle, onlyActiveOnIndex, ...props } = this.props;

    const toLocation = resolveToLocation(to);
    props.href = toLocation;

    // 如下爲React-router的代碼，根據當前URL選擇樣式
     if (activeClassName || (activeStyle != null && !isEmptyObject(activeStyle))) {
        if (router.isActive(toLocation, onlyActiveOnIndex)) {
          if (activeClassName) {
            if (props.className) {
              props.className += ` ${activeClassName}`
            } else {
              props.className = activeClassName
            }
          }
          if (activeStyle)
            props.style = { ...props.style, ...activeStyle }
        }
      }
    return <a {...props} href={href} onClick={this.handleClick} /> } } Link.propTypes = { to: oneOfType([string, object, func]), query: object, state: object, activeStyle: object, activeClassName: string, onlyActiveOnIndex: bool.isRequired, onClick: func, target: string } Link.defaultProps = { onlyActiveOnIndex: false, style: {} }複製代碼

Redirect

Redirect組件和Link組件相似。和它不一樣之處在於Redirect不須要點擊操做，直接就會更新URL地址。

使用方式

<Redirect to="/test" />複製代碼

基本實現原理

class Redirect extends React.Component {
  static contextTypes = {
    history: React.PropTypes.object,
  };
  componentDidMount() {
    // 根本不須要DOM，只要你加載該組件，就當即進行跳轉
    const history = this.context.history;
    const to = this.props.to;
    history.push(to);
  }
  render() {
    return null;
  }
}複製代碼

以上只是簡單的實現，V4版本的Redirect組件會判斷代碼是否是在服務端渲染，並根據結果不一樣來選擇在組件生命週期的哪一個階段進行URL更新操做(isServerRender ? componentWillMount : componentDidMount)。

晉級功能

class Redirect extends React.Component {
  ...
  // 服務端渲染的話，連Redirect組件都不須要渲染出來就能夠跳轉。
  componentWillMount() {
    this.isServerRender = typeof window !== 'object';
    if (this.isServerRender) {
      this.perform();
    }
  }
  // 瀏覽器端渲染則須要Redirect組件渲染以後才能進行跳轉。
  componentDidMount() {
    if (!this.isServerRender) {
      this.perform();
    }
  }
  perform() {
    const { history } = this.context;
    const { push, to } = this.props;
    // push是個bool值，用於選擇使用history的哪一個方法來跳轉連接
    if (push) {
      history.push(to);
    } else {
      history.replace(to);
    }
  }
}
Redirect.defaultProps = {
  push: false,
}複製代碼

Router

react-router中的Router組件本質就是個高階組件，用於包裹全部的頁面組件(其實在react-router v4中，BrowserRouter纔是最外層組件)，併爲全部react-router提供全局參數history。所以Router很簡單，也很容易實現。

class Router extends React.Component {
  static propTypes = {
    history: ProTypes.object.isRequired,
    children: PropTypes.node
  };

  static childrenContextTypes = {
    history: PropTypes.object.isRequired
  };

  // 經過context給組件內全部元素提供共享數據: history
  getChildrenContext(){
    // 傳入給全部react-router組件使用的history參數
    return { history: this.props.history };
  }

  render() {
    const { children } = this.props;
    return children ? React.Children.only(children) : null;
  };
}複製代碼

React-Router V4

SeverRouter (服務端渲染時使用)

createLocation方法很簡單，就是拆解URL地址，並將其分解爲pathname,search,hash三個部分。並以數組的形式返回。

// 例子url : www.webei.com/#/admin/dashboard/setting?username=liuxin&token=noface;
const createLocation = (url) => {
  let pathname = url || '/'
  let search = ''
  let hash = ''

  const hashIndex = pathname.indexOf('#')
    if (hashIndex !== -1) {
      hash = pathname.substr(hashIndex)
      pathname = pathname.substr(0, hashIndex)
    }

    const searchIndex = pathname.indexOf('?')
    if (searchIndex !== -1) {
      search = pathname.substr(searchIndex)
      pathname = pathname.substr(0, searchIndex)
    }

    return {
      pathname,
      search: search === '?' ? '' : search,
      hash: hash === '#' ? '' : hash
    }
    /* 最後返回 { pathname: 'www.webei.com/', search: '', hash: '#/admin/dashboard/setting?username=liuxin&token=noface', } */
  }複製代碼

NavLink

NavLink組件是對Route組件的封裝。目的是根據根據URL來Active對應的NavLink組件，爲其添加activeClassName和activeStyle。

Route

在React-router V4版本中，Route組件存在於./Core.js文件中。它是對createRouteElement方法的封裝。

const createRouteElement = ({ component, render, children, ...props} => (
  // createRouteElement 的執行優先級是
  component ? 
    (props.match ? React.createElement(component, props) : null)
     : render ? (
      props.match ? 
        render(props) : null 
      ) : children ? (
        typeof children === 'function' ? 
          children(props) : React.Children.only(children)
        ) : ( null )
));

// 上面的版本是否是很眼暈？下面這個版本的你大概能理解的更清楚。
const createRouteElement = ({ component, render, children, ...props} => {
  /* 參數優先級 component > render > children 要是同時有多個參數，則優先執行權重更高的方法。 */
    // component 要求是方法
    if (component && props.match) {
      return React.createElement(component, props);
    } else {
      return null;
    }
    // render 要求是方法
    if (render && props.match) {
      return render(props);
    } else {
      return null;
    }
    // children 可使方法也能夠是DOM元素
    if (children && typeof children === 'function') {
      return children(props);
    } else {
      return React.Children.only(children)
    }
    return null;
}

const Route = ({ match, history, path, exact, ...props}) => (
  createRouteElement({
    ...props,
    match: match || matchPath(history.location.pathname, path, exact),
    history
  })
);

Route.propTypes = {
  match: PropTypes.object, // private, from <Switch>
  history: PropTypes.object.isRequired, // 必備屬性
  path: PropTypes.string,
  exact: PropTypes.bool,
  component: PropTypes.func,
  // TODO: Warn when used with other render props
  render: PropTypes.func, 
  // TODO: Warn when used with other render props
  children: PropTypes.oneOfType([
  // TODO: Warn when used with other render props
    PropTypes.func,
    PropTypes.node
  ])
}複製代碼

Router

根據history參數的設定選擇使用不一樣封裝的Router組件

MemoryRouter

源代碼註釋
The public API for a that stores location in memory.

###BrowserRouter

源代碼註釋
The public API for a that uses HTML5 history.

###HashRouter

源代碼註釋
The public API for a that uses window.location.hash.

withHistory

至關重要的組件，沒有它就沒有根據URL變化而產生的從新渲染了。

/** * A higher-order component that starts listening for location * changes (calls `history.listen`) and re-renders the component * each time it does. Also, passes `context.history` as a prop. */
const withHistory = (component) => {
  return class extends React.Component {
    static displayName = `withHistory(${component.displayName || component.name})`

    static contextTypes = {
      history: PropTypes.shape({
        listen: PropTypes.func.isRequired
      }).isRequired
    }

    componentWillMount() {
      // Do this here so we can catch actions in componentDidMount (e.g. <Redirect>).
      this.unlisten = this.context.history.listen(() => this.forceUpdate())
    }

    componentWillUnmount() {
      this.unlisten()
    }

    render() {
      return React.createElement(component, {
        ...this.props,
        history: this.context.history
      })
    }
  }
}複製代碼