react基础

react-cli

npm install create-react-app -g （下载react）

create-react-app 项目名字 （创建并初始化一个项目）

npm run eject （解开旺旺大礼包）
npm run start（serve） 跑一个项目
npm run build 打包一个项目

注意事项：
1.yarn react 默认使用yarn下载插件
2.本地插件依赖和react项目依赖 版本不一致 解开大礼包 npm run eject
3.git 文件未提交 找到根目录将文件做提交操作

生命周期

15版本

创建(16版本废弃)
getInitialState
getDefaultProps
挂载
componentWillMount
componentDidMount v
运行
componentWillReceiveProps
shouldCompoentUpdate v
componetWillUpdate
componetDidUpdate v
卸载
componetWillUnmount v

16版本

除了willUnmount 其他带will 全部变为不安全
新增3个生命周期

17版本

除了willUnmount 其他带will 全部废弃

react 脚手架项目目录结构

config 配置文件 vue.config.js
public 公用文件 根目录
scripts npm run start 等的执行文件
src 源码目录
index.js 入口文件

pwa 离线应用（网页）

h5的新增特性 离线缓存 不火
1.pwa
2.云平台
3.视频流

react 组件分类

**函数组件** 无状态组件 傻瓜组件 ui组件
**类组件** 有状态组件 智能组件 影子组件

react 样式

react 没有样式作用域 样式可能会被覆盖
1.类名不一样 bem 命名法 button-error-small button-error-big
2.样式作用域
3 cssinjs（不能用预处理语言）

受控组件 非受控组件

处理表单数据使用
受控组件 表单元素被state 控制
非受控组件 表单元素通过ref获取

路由

react-router 1-3

react-router-dom 4 5 写网页使用
react-router-native 4 写app使用

官网

历史路由和hash 路由

<HashRouter> 

<BrowserRouter> 

<Link to> 通过to属性控制路由的切换

<NavLink to>

路由里的相关标签必须放到 HashRouter 或者BrowserRouter内部

<Route path='/' component  render  children exact/> 显示匹配的组件

path 和地址栏做对比
compponent render children 用来渲染组件

只要path配品到所有的组件都会显示

exact 精准匹配（全匹配） 只有当路径和path 完全一致的时候才会显示组件

<Swith> 万里挑一 从上到下匹配路径和path  返回第一个满足的组件  剩下的结束

<Redirect from to exact> from 从哪个路径来 重定向到哪一个路径

声明式导航 编程式导航

正常的组件没有路由对象
如果组件被<Route> 里的render 或者component 渲染过的组件 在props就有路由对象

路由传参

1.query 相当于get 参数 数据长度有限制 页面刷新数据不丢失 使用要做解析
2.params 动态导航 数据有限制 页面刷新不丢失 使用简单
3.state 数据无限制 使用简单 页面刷新会丢失

嵌套路由

hoc 高阶组件

http://note.youdao.com/noteshare?id=24eb39aa32795c8053147f5c6a5bbffd
高阶组件本质是一个函数 接收组件作为参数 返回一个新的组件
在返回新的组件里 渲染接收的组件 做统一处理优化代码
被高阶组件处理过的组件 一般从props获取数据