React初次学习

React

React是一个用于构建用户界面的JavaScript库
React主要用于构建UI，很多人认为React是MVC中的V（视图）
React起源于Facebook的内部项目，用来建设instagram的网站，并于2013年5月开源。
React拥有较高的性能，代码逻辑非常简单，越来越多的人已经开始关注和使用它。

React特点

1. “声明式设计"—React采用声明范式。可以轻松描述应用。
2. ”高效"—React通过对DOM的模拟，最大限度地减少与DOM的交互。
3. “灵活”—React可以与已知的库和框架很好的配合
4. “JSX”—JSX式JavaScript语法的扩展。React开发不一定使用JSX，但我们建议使用它。
5. “组件”—通过React构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6. “单向响应的数据流”—React实现了单向响应的数据流，从而减少了重复代码这也是它为什么比传统数据绑定更简单。

生命周期

挂载时（当组件实例被创建并插入DOM中时，其生命周期调用顺序如下）
Constructor（） 状态初始化
render（）模板渲染
ComponentDidMount（）一般这里进行服务端的数据初始化请求
更新时
shouldComponentUpdate（）是否允许组件更新
render（） 组件模板渲染
ComponentDidUpdate（）组件更新完成
卸载时
ComponentWillunmount（）

React 路由

React路由属于前端路由，将不再向服务器发送请求，页面的切换在客户端完成。
怎样实现的呢？
一次请求所有的切换页面链接和数据到本地，让界面进行一个本地的切换。（需要交互的地方可以用axios来交互）
SPA（单页应用程序）
单页web应用（single page web application ，SPA）就是只有一张web页面的应用，是加载单个HTML页面并在用户与应用程序交互时动态更新该页面的web应用程序。

前端路由的实现方式之一

利用a标签的描点 用hashchange（）事件
window。hashchange（）可以监听锚点的变化，并读取“#"后面的值。

React路由使用

1. 安装路由模块

	cnpm install react-router-dom --save

2. 配置路径和组件（path界面，组件）
   引入 import{
   BrowserRouter as Router，（容器，相需使用，用它包起来）
   Route，（出口，路由的出口）
   Link ，（相当于a标签）
   }. from ”react-router-dom“
   Link 实现跳转，需要to属性
   Router：实现页面的渲染，Route的path和to的路径一致
   component 中写入配置的组件
   exact 精确配置

   <NavLink>中的activeClassName/activestyle属性可以给选中的链接加样式
   

二级路由

子路由的合理嵌套，实现内部再次切换
APP根组件中的子组件路由再嵌套子组件路由
子组件中的孙子组件的<Link>中to属性<Link to="父/子路径"/>要以自己的父组件的路劲为一级路由再配
自己的路由。

Redirect （重定向）

import {Redirect} from "react-router-dom"
<Route exact path="/user">
	<Redirect to="/user/info " />
</Route>

路由传值（让页面生成动态数据）

数据的传递，页面的跳转
get和动态路由两种方式进行传值，再请求的路由后面跟上参数
组件中的props可以获取这样的参数在loation属性中（search）里拿到属性后，通过切割来获取属性值
然后用ComponentDidMount（）来接收操作属性值

this.props.loaction.search

动态路由（需要进行提前的定义单独的定义）

/news2/:id
/news2/1
/news2/2
<Route path="/art/:id" component={Art} />
<link to="/art/123">Aa</link>
但获取时用props的match获取中有一个params属性
	dangerouslySetInnerHTML解析请求过来的页面
	（解决渲染时无法识别标签)

location 属性

hash 设置或返回从#号开始的URL
host 设置或返回主机名和当前URL的端口号
hostname 设置或返回主机名和当前URL的端口号
href 设置或返回当前URL的主机名
pathname 设置或返回当前URL的路径部分
port 设置或返回当前URL的端口号
Protocol 设置或返回当前URL的协议
search 设置或返回从问号（?）开始的URL（查询部分）