react路由基础（Router、Link和Route）

react路由基础（Router、Link和Route）

1. Router：Router我们可以把它看做是react路由的一个路由外层盒子，它里面的内容就是我们单页面应用的路由以及路由组件；
2. Link：Link是react路由中的点击切换到哪一个组件的链接，（这里之所以不说是页面，而是说组件，因为切换到另一个界面只是展示效果，react的本质还是一个单页面应用-single page application）。

3. Route：Route代表了你的路由界面，path代表路径，component代表路径所对应的界面。有一个path属性和一个组件属性（可以是component、render等等）。
   Route-Link-Router.png

React的生命周期

1. 组件的生命周期可分为三种状态：
   • Mounting：已插入真实DOM
   • Updating：正在被重新渲染
   • Unmounting：已移除真实DOM
2. 生命周期的方法有：
   • componentWillMount：在渲染前调用，在客户端也在服务端。
   • componentDidMount：在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。如果你想和其他JavaScript框架一起使用，可以用这个方法调用setTimeout，setInterval或者发送AJAX请求等操作（防止异步操作阻塞UI）。
   • componentWillReceiveProps：在组件接收到一个新的prop（更新后）时被调用。这个方法在初始化render时不会被调用。
   • shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
     可以在你确认不需要更新组件时使用。
   • componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
   • componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
   • componentWillUnmount在组件从 DOM 中移除之前立刻被调用
3. window.location 对象可用于获取当前页面地址（URL）并把浏览器重定向到新页面。
   • window.location.href 返回当前页面的 href (URL)
   • window.location.hostname 返回 web 主机的域名
   • window.location.pathname 返回当前页面的路径或文件名
   • window.location.protocol 返回使用的 web 协议（http: 或 https:）
   • window.location.assign 加载新文档

【未完待续。。。】