React特点：jsx语法；单向数据流；组件系统化；虚拟dom

jsx语法：——数据绑定——

—内容绑定——<div>{表达式}</div>

—属性绑定——<div 属性={表达式}></div>

—样式绑定——<div style={{样式:表达式}}></div>

—事件绑定——<div onClick={函数}></div>

状态：

在constructor方法中用this.state定义组件状态

用this.setState()更改组件状态

组件：

创建组件（一个js或.jsx文件就是一个组件）

组件通信：

父传子

——父组件在子组建身上通过自定义属性传值给子组建，子组件内部通过this.props接收

子传父

——父组件在子组件身上通过自定义属性传值给子组件，子组件内部通过this.props拿到该函数，调用函数完成传值

跨组件—

—创建一个Context(通信上下文)

—外层组件通过Context.Provider的value属性传值

—内层组件通过this.context接收值

兄弟组件通信

——通过events来传值

——一个组件监听事件

——另一个组件触发事件

组件的声明周期

//组件实例化期——只会调用一次
componentDidMount //发起网络请求 创建定时器，监听事件   
render
ComponentWillMount

//更新期的方法——会在每次组件更新时执行
componentWillUpdate
render
componentDidUpdate
//——（不能在更新期方法中调用setState()）——

//卸载期的方法——释放资源
componentWillUnmount //释放资源(取消网络请求，销毁定时器，移除监听事件)

路由

安装react-router-dom插件

react-router-dom提供了BrowserRouter,HashRouter两个路由管理器组件

react-router-dom提供了Route,Switch,Redirect路由组件—所有路由组件必须嵌套在路由管理器组件内部

import {BrowserRouter as Router,Route,Switch,Redirect} from 'react-router-dom'

Switch作用：内部的多个路由，从上往下匹配，第一个匹配到的路由渲染对应的组件，其他路由不再匹配

属性-exact- 精确匹配（浏览器地址栏的地址必须和路由地址完全一样） 当一级路由下有二级路由时不能添加exact否则二级路由不显示

在定义二级路规则时，哪个页面需要二级路由，就将路由规则放到哪个页面；

跳路由的方式：

声明式导航——内部自带

Link

NavLink

编程式导航——通过写js代码实现跳路由，只能在二级页面写，不能写在tabbar组件中

props.history.push()  //跳路由
props.location  //获取路由参数
props.match  //获取路由参数
props.history.replace()
props.history.go()  //前进 or 后退
props.history.goBack() //后退
props.history.goForward() //前进

跳路由Link与NavLink的区别

使用NavLink会自动维护active类的添加/移除—可以用到点击事件的高亮；Link则不会。

千万不要将NavLink换成a标签 （a标签不会自动维护active类的添加/移除 而且会使页面刷新）

路由传参

//动态路由传参——刷新页面，参数数据不会丢失——参数会在地址栏（可加密）
<Route path="/detail/:id" component={Detail}></Route>
//组件内，通过props.match.params.xxx接受传递过来的参数

//通过query传参——刷新页面，参数数据会丢失
//只在条路有的同时可以传参
{pathname:"/地址",query:{属性}}
//通过props.location.query.xxx接受传来的参数

//通过state传参——刷新页面，参数数据不会丢失，传的参数是加密的，但是通过手动该地址跳路由无法传参
{pathname:"/地址",state:{属性}}
//通过 props.locations.state.xxx

未完……