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是个根据路由按需加载的例子,我觉得很有用

      React全家桶之react-router(二)_第1张图片  


      注3:这些项目中有用到node,webpack这些工具,这个我将在后面的文章中提到,现在只要会用就行了。


      好了,当你把一些例子都敲完的时候,你应该已经把react-router理解的差不多了,其实它很简单么,不就是通过管理 URL,实现组件的切换和状态的变化么!但是你一定会发现了很多没见过的东西,比如:

   1, 这个文件是什么东东?干嘛用的?

      React全家桶之react-router(二)_第2张图片

     2,这些又是什么写法?(黑人问号)

      React全家桶之react-router(二)_第3张图片

      这些后面会讲到的,所以说学react最有挑战性的是,当你准备学一门新技术的时候,它中间又包含着另一门技术,除非你不想搞懂它,否则你必须又要去学它,因为围绕着react的是一套生态体系,你要学会用它家族中的每个成员,才能发挥出react最大的威力!

          

     

   

     

   

你可能感兴趣的:(react-router,React全家桶)