React全家桶之react-router(二)
如果你用过angularJs,你一定知道有路由这个东西,浏览器根据路由上“#”号后面的标记区分不同的逻辑页面,并将不同的页面绑定到对应的控制器上, angularJs和react都是适合单页应用的前端框架,路由系统大同小异。
在 web 应用开发中,路由系统是不可或缺的一部分。在浏览器当前的 URL 发生变化时,路由系统会做出一些响应,用来保证用户界面与 URL 的同步。随着单页应用时代的到来,为之服务的前端路由系统也相继出现了。主流的前端框架也都有自己的路由,比如 Backbone、Ember、Angular、React 等等。那 react-router 相对于其他路由系统又针对 React 做了哪些优化呢?它是如何利用了 React 的 UI 状态机特性呢?又是如何将 JSX 这种声明式的特性用在路由中?
有篇文章深刻解析了路由,看这里:https://segmentfault.com/a/1190000004075348?utm_source=tuicool&utm_medium=referral。
你可能一开始没看懂,没关系。大概先了解它的用法和用处就行了,具体还是要在代码中慢慢掌握。我一直认为学习前端任何一门技术都需要循序渐进,特别是当你看了很多概念一头雾水的时候,先别打退堂鼓。老兄,去敲一些代码吧。当你敲完代码并在页面上看到效果时,你再回过头来可能对那些概念更加了解。
github上的react-router主页:https://facebook.github.io/react
某人整理的react-router-tutoria: https://github.com/reactjs/react-router-tutorial
另外还有阮一峰的react-router实例分析:http://www.ruanyifeng.com/blog/2016/05/react_router.html?utm_source=tool.lu
注1:我觉得react-router-tutorial这里的实例会更加简单一点,清晰一点,每个例子一个特性,都敲一遍后就应该差不多理解了
注2: github上的react-router的例子在里面的examples文件夹下,还有那个huge-apps是个根据路由按需加载的例子,我觉得很有用
注3:这些项目中有用到node,webpack这些工具,这个我将在后面的文章中提到,现在只要会用就行了。
好了,当你把一些例子都敲完的时候,你应该已经把react-router理解的差不多了,其实它很简单么,不就是通过管理 URL,实现组件的切换和状态的变化么!但是你一定会发现了很多没见过的东西,比如:
1, 这个文件是什么东东?干嘛用的?
2,这些又是什么写法?(黑人问号)
这些后面会讲到的,所以说学react最有挑战性的是,当你准备学一门新技术的时候,它中间又包含着另一门技术,除非你不想搞懂它,否则你必须又要去学它,因为围绕着react的是一套生态体系,你要学会用它家族中的每个成员,才能发挥出react最大的威力!
标签:
相关文章
-
无相关信息