每日面试一题

router的底层实现

当url地址或者点击forword/back或者点击link时。以browserHistory(一种history类型:一个 history 知道如何去监听浏览器地址栏的变化， 并解析这个 URL 转化为 location 对象)为例 :

browserHistory进行路由state管理,主要通过sessionStorage

//保存　路由state(router state)

function saveState(key, state) {

  ...

  window.sessionStorage.setItem(createKey(key), JSON.stringify(state));

}

//读取路由state

function readState(key) {

  ...

  json = window.sessionStorage.getItem(createKey(key));

  return JSON.parse(json);

}

其中saveState函数传进来的state是个json对象，如：

{route: '/about'} ///假设此时的location为'/about'

进行路由匹配，最终渲染对应的组件

const About = React.createClass({/*...*/}) //About 组件

const Inbox = React.createClass({/*...*/}) //Inbox 组件

const Home = React.createClass({/*...*/}) //Home组件

render() {

    let Child

    switch (this.state.route) {

      case '/about': Child = About; break;

      case '/inbox': Child = Inbox; break;

      default:      Child = Home;

    }

    return (

      <div>

        <h1>App</h1>

        <ul>

          <li><a href="#/about">About</a></li>

          <li><a href="#/inbox">Inbox</a></li>