专栏名称: 前端大全
分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯
目录
相关文章推荐
前端早读课  ·  【第3406期】为什么前端打包出来的静态文件 ... ·  3 天前  
前端早读课  ·  【早阅】GitHub Copilot ... ·  5 天前  
前端早读课  ·  【第3404期】git ... ·  5 天前  
51好读  ›  专栏  ›  前端大全

React 如何优雅地写单页面应用?

前端大全  · 公众号  · 前端  · 2017-06-26 19:58

正文

本文作者:张小龙,美团前端工程师,来自作者的知乎专栏


为了追求极致的用户体验,很多Web应用采用单页面方式呈现,然而单页面应用,往往对应着高复杂度,比如多层次路由配置、统一数据处理等,这需要项目有一个强大的技术架构和友好的构建环境来支撑。路由器,作为单页面构建的基础,对单页面应用的开发、加载、运行各个环节都起着至关重要的作用,项目体量越大,对路由器的依赖表现越强。



下面是一个React应用的基础路由配置,了解React的同学一定不陌生:


const App = ()=> {

  return (

    <HashRouter>

      <div>

        <Route cache component={ Home } path="/"/>

        <Route component={ Products } path="/products"/>

      div>

    HashRouter>

  )

}

 

ReactDOM.render(<App/>, document.getElementById('root'))


是啊,路由配置不就这么简单吗?


真正做过单页面应用的同学要反驳你了,并且会立刻提出很多问题:

  1. 路由配置拆分怎么做?

  2. 动态加载怎么做?

  3. props怎么传递?

  4. 登录拦截怎么做?

  5. 列表页能不能缓存?

  6. balabala......

能遇到这些问题的同学,相信一定是饱经风霜了。这些问题,Demo中是不会有的,都是真实项目中才能遇到的。


当然,这篇文章,就是为解决这些问题而生的,下面我们以React-Keeper(以下简称Keeper)为例,来解决这些问题。


BTW: React-Keeper是React生态里一款较新的开源路由库,由国内团队开发,借鉴了React-Router 4很多特点,不过灵活性、实用性都强于React-Router很多,而且兼容React-Router常用用法,其文档和代码可以参见React-Keeper GitHub官网。



1. 路由拆分


集中化的路由配置是一个很糟糕的方案,尤其是在大型Web应用中,路由拆分是很有必要的。


Keeper实现路由拆分的方式:


const App = ()=> {

  return (

    <HashRouter>

      <div>

        <Route cache component={ Home } path="/"/>

        <Route component={ Products } path="/products"/>

      div>

    HashRouter>

  )

}

 

const Products = ()=> {

  return (

    <div>

      <Route component={ ScienceProducts } path="/sci" />

      <Route component={ DailiUseProducts } path="/dai" />

    div>

  )

}

 

ReactDOM.render(<App/>, document.getElementById('root'))



实际开发中可以将大量的路由配置信息,按照模块化的方式进行拆分,跟路由只引入模块入口,内部页面配置在模块内部,模块内可以再切分二级模块,以此实现路由的拆分。


2. 动态加载


把所有的JS文件打包为一个文件并不是一个明智的选择,这样会严重拖慢首屏的加载时间,JS代码应该是分割的,并且是按需加载的。


Keeper实现按需加载的方式:


// 定义动态加载函数

const loadProduct = (cb)=> {

  System.import('../Products.js').then((Products)=>{

      cb(Products)

    })

}

 

// 通过loadComponent属性引入

<Route loadComponent={ loadProduct } path='/products'/>


3. props传递


我们知道在React-Router中并不支持自定义props的传递,然而这在Keeper中支持得很好:


let hostUser = { id: 'ASDFSDFG', name: '马化腾' }

 

// 父组件中通过props传入Route (hostUser)

const Products = ()=> {

  return (

    <div>

      <Route hostUser={ hostUser } component={ ScienceProducts } path="/sci" />

      <Route component={ DailiUseProducts } path="/dai" />

    div>

  )

}

 

// Route组件所有的props自动传入子组件

const ScienceProducts = (props)=> {

  return (

    <div>

      <h3>{ props.hostUser.name }h3>

    div>

  )

}


4. 登录拦截


登录拦截、权限检测、表单关闭检测,这些是业务中非常常见的场景,而这也在Keeper中得到了很好的支持。


Keeper提供了两种过滤器来对路由的状态变化进行过滤和拦截:EnterFilter和LeaveFilter。

EnterFilter: 进入页面之前执行的过滤器,适用于登录检测、权限检测一类的场景。


LeaveFilter: 页面解绑之前执行的过滤器,适用于表单关闭检测一类的场景。


// 定义过滤器,内部通过callback进行流程控制

const loginFilter = (callback, props)=> {

  

  if(!props.host) {

    new Promise((resolve, reject)=>{

      // some code

    }).then(callback);

  }

}

 

// 将过滤器加入Route

<HashRouter>

  <Route path='/user' component={User} enterFilter={ loginFilter } />

HashRouter>

 

// 多过滤器配置

<HashRouter>

  <Route path='/user' component={User}, enterFilter={[ loginFilter, permitFilter1, permitFilter2 ] } />

HashRouter>



5. 进阶


Keeper提供了很灵活的配置方式,以让我们简单的写出优雅的代码。从下面看几个场景切入介绍下Keeper常用配置的使用。


Q1: 页面未找到时显示默认

A1: 使用Route提供的miss属性,当页面找不到的时候自动渲染该组件。


<Route miss path='/home' component={ Home }/>


Q2: 进入一个模块直接进入模块引导页

A2: 使用Route提供的index属性,和miss使用方式雷同,并且可以和miss一起使用。


<Route index miss path='/home' component={ Home }/>


Q3: 组件地址重定向的处理

A3: 使用Route提供的redirect属性,当其他条件匹配完成时,自动进行页面重定向。


<Route redirect='/homepage' path='/home' component={ Home }/>


Q4: 如何使用history的state属性?

A4: Keeper内部集成了state代理,对支持state API的浏览器,直接使用state API;对其他浏览器使用内部集成的state管理器,即使用随机ID(URL中加入随机key)来映射state,并使用sessionStorage进行存储。


写在最后


React-Keeper是一款新兴的React路由库,由于其灵活的设计和强大的实用功能,一经发布便引起众多React开发者关注与尝试。


React-Keeper刚刚发布了V2.0版本,在底层很多地方做了优化。不过新兴框架,文档还不健全,目前开发者的使用方式,都是依赖其GitHub官网文档,目前尚未有中文文档。


一句话点评React-Keeper: 学习自React-Router,却远超过React-Router。


跟随硅谷技术明星,学习最实用的 React 开发技能

由 Udacity 与硅谷 React Training 专家联合打造的 React 开发者纳米学位项目,旨在帮助你快速掌握最前沿 React JS 框架,成为抢手高级前端工程师。此项目全球首次推出,申请截止至 6月27日(明天) 23:59

 

React Training 是全球最具经验的 React 培训公司,其客户包括 Netflix、IBM、Visa、The New York Times、Starbucks 等世界 500 强公司。


通过此项目,你将学习到以下技能: 


  • 如何用 React 为网页网站构建“声明式的”用户界面

  • 如何通过 React Native 为 iOS 和 Android 平台构建声明式用户界面

  • 如何通过 Redux,在应用中以更加“可预期的”方式管理状态


申请本项目仅剩最后1天!  扫描下方二维码,或点击[阅读原文],立即申请,成为薪资最高的 React 前端开发工程师!