[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.collections",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"topics",[33],"user",{"_20":21,"_13":14,"_22":23,"_24":14,"_25":26,"_27":18,"_28":29,"_30":29,"_31":32},"loginname","vifird","page",1,"limit",20,"total","id","28028","avatar_url","https://avatars0.githubusercontent.com/u/15553840?v=4","githubUsername","create_at","2017-04-25 03:12:49.865","score","topic_count",2,"reply_count","is_star",false,{"_20":34,"_35":21,"_36":37,"_38":39,"_40":41,"_42":43,"_44":32,"_45":32,"_30":46,"_47":48,"_25":49,"_50":51},"24617","author_id","tab","share","content","为了追求极致的用户体验，很多Web应用采用单页面方式呈现，然而单页面应用，往往对应着高复杂度，比如多层次路由配置、统一数据处理等，这需要项目有一个强大的技术架构和友好的构建环境来支撑。路由器，作为单页面构建的基础，对单页面应用的开发、加载、运行各个环节都起着至关重要的作用，项目体量越大，对路由器的依赖表现越强。 \r\n\r\n![v2-e1a40a7e87256f42bc522e8e91e757fc_b.jpg](//static.cnodejs.org/FoqHf5iD_ykA26kvuNurU4nzUXiG)\r\n\r\n下面是一个React应用的基础路由配置，了解React的同学一定不陌生：\r\n```javascript\r\nconst App = ()=> {\r\n return (\r\n \r\n

\r\n \r\n \r\n

\r\n \r\n )\r\n}\r\nReactDOM.render(, document.getElementById('root'))\r\n```\r\n是啊，路由配置不就这么简单吗？\r\n\r\n真正做过单页面应用的同学要反驳你了，并且会立刻提出很多问题：\r\n\r\n* 路由配置拆分怎么做？\r\n* 动态加载怎么做？\r\n* props怎么传递？\r\n* 登录拦截怎么做？\r\n* 列表页能不能缓存？\r\n* balabala...... \r\n\r\n![v2-952fb10c0b6ea07eeb21d5ecdfd88f08_r.png](//static.cnodejs.org/FmwhHWHQNMODz2H-4hkddcyaFx0a)\r\n\r\n能遇到这些问题的同学，相信一定是饱经风霜了。这些问题，Demo中是不会有的，都是真实项目中才能遇到的。\r\n\r\n当然，这篇文章，就是为解决这些问题而生的，下面我们以React-Keeper（以下简称Keeper）为例，来解决这些问题。\r\n\r\nBTW: **React-Keeper**是React生态里一款较新的开源路由库，由国内团队开发，借鉴了React-Router 4很多特点，不过灵活性、实用性都强于React-Router很多，而且兼容React-Router常用用法，其文档和代码可以参见[React-Keeper GitHub](https://github.com/vifird/react-keeper)官网。\r\n\r\n\r\n### 1. 路由拆分\r\n\r\n集中化的路由配置是一个很糟糕的方案，尤其是在大型Web应用中，路由拆分是很有必要的。\r\n\r\nKeeper实现路由拆分的方式：\r\n```js\r\nconst App = ()=> {\r\n return (\r\n \r\n

\r\n \r\n \r\n

\r\n \r\n )\r\n}\r\n\r\nconst Products = ()=> {\r\n return (\r\n

\r\n \r\n \r\n

\r\n )\r\n}\r\n```\r\nReactDOM.render(, document.getElementById('root'))\r\n实际开发中可以将大量的路由配置信息，按照模块化的方式进行拆分，跟路由只引入模块入口，内部页面配置在模块内部，模块内可以再切分二级模块，以此实现路由的拆分。\r\n\r\n### 2. 动态加载\r\n\r\n把所有的JS文件打包为一个文件并不是一个明智的选择，这样会严重拖慢首屏的加载时间，JS代码应该是分割的，并且是按需加载的。\r\n\r\nKeeper实现按需加载的方式：\r\n```js\r\n// 定义动态加载函数\r\nconst loadProduct = (cb)=> {\r\n System.import('../Products.js').then((Products)=>{\r\n cb(Products)\r\n })\r\n}\r\n\r\n// 通过loadComponent属性引入\r\n\r\n```\r\n### 3. props传递\r\n\r\n我们知道在React-Router中并不支持自定义props的传递，然而这在Keeper中支持得很好：\r\n```js\r\nlet hostUser = { id: 'ASDFSDFG', name: '马化腾' }\r\n\r\n// 父组件中通过props传入Route (hostUser)\r\nconst Products = ()=> {\r\n return (\r\n

\r\n \r\n \r\n

\r\n )\r\n}\r\n\r\n// Route组件所有的props自动传入子组件\r\nconst ScienceProducts = (props)=> {\r\n return (\r\n

\r\n

{ props.hostUser.name }

\r\n

\r\n )\r\n}\r\n```\r\n### 4. 登录拦截\r\n\r\n登录拦截、权限检测、表单关闭检测，这些是业务中非常常见的场景，而这也在Keeper中得到了很好的支持。\r\n\r\nKeeper提供了两种过滤器来对路由的状态变化进行过滤和拦截：EnterFilter和LeaveFilter。\r\n\r\nEnterFilter: 进入页面之前执行的过滤器，适用于登录检测、权限检测一类的场景。\r\n\r\nLeaveFilter：页面解绑之前执行的过滤器，适用于表单关闭检测一类的场景。\r\n```js\r\n// 定义过滤器，内部通过callback进行流程控制\r\nconst loginFilter = (callback, props)=> {\r\n \r\n if(!props.host) {\r\n new Promise((resolve, reject)=>{\r\n // some code\r\n }).then(callback);\r\n }\r\n}\r\n\r\n// 将过滤器加入Route\r\n\r\n \r\n\r\n\r\n// 多过滤器配置\r\n\r\n \r\n\r\n```\r\n### 5. 进阶\r\n\r\nKeeper提供了很灵活的配置方式，以让我们简单的写出优雅的代码。从下面看几个场景切入介绍下Keeper常用配置的使用。\r\n\r\n**Q1:** 页面未找到时显示默认\r\n\r\n**A1:** 使用Route提供的miss属性，当页面找不到的时候自动渲染该组件。\r\n\r\n``````\r\n\r\n**Q2:** 进入一个模块直接进入模块引导页\r\n\r\n**A2:** 使用Route提供的index属性，和miss使用方式雷同，并且可以和miss一起使用。\r\n\r\n``````\r\n\r\n**Q3:** 组件地址重定向的处理\r\n\r\n**A3:** 使用Route提供的redirect属性，当其他条件匹配完成时，自动进行页面重定向。\r\n\r\n``````\r\n**Q4:** 如何使用history的state属性？\r\n\r\n**A4:** Keeper内部集成了state代理，对支持state API的浏览器，直接使用state API；对其他浏览器使用内部集成的state管理器，即使用随机ID（URL中加入随机key）来映射state，并使用sessionStorage进行存储。\r\n\r\n### 写在最后\r\n\r\nReact-Keeper是一款新兴的React路由库，由于其灵活的设计和强大的实用功能，一经发布便引起众多React开发者关注与尝试。\r\n\r\nReact-Keeper刚刚发布了V2.0版本，在底层很多地方做了优化。不过新兴框架，文档还不健全，目前开发者的使用方式，都是依赖其GitHub官网文档，目前尚未有中文文档。\r\n\r\n一句话点评React-Keeper: 学习自React-Router，却远超过React-Router。\r\n\r\n## 附录\r\n\r\nReact-Keeper Github : [ https://github.com/vifird/react-keeper]( https://github.com/vifird/react-keeper)\r\n原文地址 : [https://zhuanlan.zhihu.com/p/26308250](https://zhuanlan.zhihu.com/p/26308250)","title","React如何优雅地写单页面应用？","last_reply_at","2017-08-12 06:46:03.901","good","top",5,"visit_count",9097,"2017-04-26 16:21:15.815","author",{"_13":14,"_22":23}]