由后端启发的路由

许多前端路由库都是由后端启发的。

他们只是在 url 改变的时候运行适当的路由处理程序，从而启动和渲染所需的组件。前端和服务端的结构是类似的，唯一的区别即是处理函数所做的事情。

为了演示其相似性，你可以在如下的代码中发现服务端 Express 框架，前端代码 page.js 路由和 React 相同的路由代码片段。

  1. // Express
  2. app.get('/login', sendLoginPage)
  3. app.get('/app/:user/:account', sendApp)
  1. // Page.js
  2. page('/login', renderLoginPage)
  3. page('/app/:user/:account', renderApp)
  1. <!-- React -->
  2. <Router>
  3.   <Route path="/login" component={Login}/>
  4.   <Route path="/app/:user/:account" component={App}/>
  5. </Router>

React 隐藏了一些 JSX 背后的逻辑，但是它们做的都是同样的事情，在引入动态参数之前，它们都工作得很完美。

在上面的例子中，一个用户可能有多个账号并且当前账户可以随意更改。如果在 App 页面改变账户名，对应的处理程序为新的账户名重启或者重发相同的 App 组件 - 然而其实只需要更改现存组件里面的一些数据即可。

对于虚拟 DOM 解决方案这只是小菜一碟，因为它们会查找 DOM 的差异，然后只更新需要的部分 - 但是对于传统框架，这意味着更多不必要的工作。