#前言

react-router4出来有很久了, 一直没有使用过, 最近计划学习一下react16以及相关的生态库, 就打算从react-router4开始了, 毕竟现在已经是大行其道了, 我会从react-router3 和roact-router4的异同来慢慢说明两者的区别

#声明方式

react-router3的路由声明通常是在一个文件里声明完整的路由关系,比如:

1
2
3
4
5
6
7
8

<Router>
  <Route path="/" component={App}>
    <Route path="accounts" component={Accounts}/>
    <Route path="statements" component={Statements}>
      <Route path="info" component={Info}>
    </Router>
  </Route>
</Router>

路由相关组件之间的调用非常隐晦, 比如App为下级路由组件Accounts传递值是这样的:

1
2
3
4
5
6
7
8
9

class App extend Component {
  render() {
    return (
      <div>
        {...props.children} // 这句就是对Accounts的调用
      </div>
    )
  }
}

从上面可以看出来, 从代码逻辑上,完全看不出App调用了Accounts,这导致了代码的可读性非常的差.

那么react-router4的路由声明变成了什么样子呢?

1
2
3
4
5
6
7
8
9

class App extend Component {
  render() {
    return (
      <div>
        <Route path="accounts" component={Accounts}/>
      </div>
    )
  }
}

变成了这样!是不是一目了然?现在变成了那里有路由需求, 那里声明路由的方式.熟悉vue的同学应该已经看出来,这种写法和vue-router的调用方式很相似,比较简单明了. 其实我第一次用react-router4的时候由于没看文档,还被坑了一次.

#学习计划

• react16 和相关的生态资源, 看部分源码
• 学习webpack打包原理, 已经写一些loader和plugin
• babel 的深度使用学习 ast -> 转换 -> 再编译
• 前端性能的深入了解, 包括测试, 监控, 调优