1、react的特点
react使用用来构建用户界面的JavaScript库 facebook公司出品
组件，单向数据
2、react安装
01 全局安装脚手架
npm install create-react-app -g
02 切换到根目录[可选]
cd/
03 创建项目
create-react-app myreact
3、react运行
01切换到项目目录
cd myreact
02 运行项目
npm run start
03 在浏览器打开
4、vscode插件
Chinese 中文界面
ESLint js语法检查
Live Server 本地服务器
Path Intellisense 智能路径提醒
React/Redux/react-router Snippets 语法提醒
5、jsx
JavaScript xml扩展语言：方便在js中编辑HTML模板
特点
1.一个组件只能有一个根节点
2.{}表达式 ，js代码编写
3.{/* */}注释
4.class用classNema表示
5.数据内容可以有HTML标签
6.条件渲染
a 三目运算
b && 并且运算符
列表渲染
{arr.map((item,index)=><h3 key={index}>{item}</h3>)}
5、react 组件创建
1.函数组件（无状态组件）
function ChildA (){
return(
<div>
<h1>无状态组件</h1>
</div>
)
函数（组件名）首字母要大写
2.类组件（有状态组件）
import React, { Component } from 'react'
导入react和组件方法
class ChidB extends Component {
constructor(props) {
super(props);
this.state = { };
}
render() {
return (
<div>
<h3>有状态组件{this.props.num}</h3>
</div>
);
}
}
export default ChidB;
export default ChidB
导出
3.使用组件
1.导入
import ChidB from './components/ChidB'
2.使用
<ChidB></ChidB>
6、react-props属性组件之间数据传参方式
1.传递参数
<ChidB num ={525}></ChidB>
2.获取数据子组件
{this.props.num}
3.默认props属性
f
7、组件嵌套
在子组件中通过this.porps.children 获取到所有的嵌套内容
item.type 嵌套内容的标签的标签名区分
过滤嵌套内容
{this.props.children&&this.props.children.filter(item=>item.name==="title")}
当前嵌套内容是name为title的元素保留
8、state状态
1.定义state状态
construcor(props){
super(porps)
this.state({num:1})
}
2.更新状态
this.setState({num:10})
把状态num更新为10
9、props和State区别
1.props属性 通常由父组建传递过来 只读
2.state状态 组件自身的数据，可以修改，修改state会触发视图更新
10、表单额双向绑定
<input type="text" value={this.state.num} onChange={this.changeNum2}/>
11、子组件如何向父组建传参
1.在父组件里面定义方法
changeColor=v=>this.setState({color:v})
2.在父组件传递参数
stepper changeColor={this.changeColor)
3.在子组件中调用方法
<p onClick={()=>this.props.changeColor('orange')}
12、动态的class
<h1 className={this.state.color}>className</h1>
<button onClick={()=>this.changeColor('red')}>红</button>
13、组件的生命周期
定义 在组建的创建、初始化、渲染、更新、卸载、过程我们称为组建的为生命周期，在这些过程中执行的回调函数，称为组件的生命周期钩子函数
1.挂载阶段
constructor：构造函数
componnetWillMount：组件将要挂载
render（）：渲染组件
componentDidMount：组件已经挂载
作用：网络请求，定时器
在这个阶段可以获取ref dom元素
2.更新阶段
componnetWillReceiveProps：组件将要获取props
shouldComponentUpdate(nextProps,nextState）：组价需要更新
作用：优化组件的渲染
return true 组件更新（默认）
return false 组件不更新
componentWillUpdate：组件将要更新
render：组件渲染
componentDidUpdate(prevProps,prevvState)：组件已经更新
本地储存数据
3.卸载阶段
componentWillUnmont：组件将要卸载
移除定时器，移除事件绑定
14、react路由react-router-dom
1.模块解释
HashRouter：哈希路由
Route：路由项
path：路径
component：组件
exact：精确匹配
NavLinkl：导航链接
to链接地址（和路path相对应）
exact 精确匹配
Redirect：重定向
to 定向到
Switch：切换
一次匹配一个路由页面
2.路由参数
配置：<Route path="/produce/:id">
使用：<NavLinkl to="/produce/abc">
获取参数：
props.match.params.id
当前匹配路由的路由参数
3.子路由
路由中包含路由
4.404
把没有path的Route配置在最后
15、Fetch h5 原生api
Fetch(url,{params})
16、路由组件的props history
1.历史记录
go（num）前进|后退
goBack（）返回
goFoword（）前进
push（）跳转
replace（）替换
2.match：当前匹配路由
params:{}路由的参数
url：当前的路由的url
isExact 是否精确匹配
3.location：地址栏信息
hash哈希值 地址#后面的内容
pathname 当前路由地址
17、hooks
让函数拥有更多的能力
1.useState：使用状态
const [count,setCount]=useState(0);
2.useEffect：使用效果
（模拟生命周期）
useEffect(()=>{
console.log(`useEffect 你单击了${count}次`)
return ()=>console.log("我要被卸载了");
},[count])
18、ant
1.最好的学习方式是看官方答的api官网
https://ant.design/components/icon-cn/
1.怎么去引用
2、api
属性
方法
2.ant安装
1、安装
npm run antd -S
2、导入css
import ‘antd/dist/antd.css’
3、导入需要的组件
import {Button} from ‘antd’
4、使用组件，查看api文档
<Button type="">按钮</Button>
3.组件
1、Layout:布局
Header 头部
Sidder 侧边
Foorder 底部
2、Menu：菜单
菜单菜单项目
SubMeny 子菜单
4.antd组件
1、Table：表格
columns：列数据
dateSource：数据源
pagination：分页数据指定
onChange：当表格数据发生改变
pagination,filters,sorter：分页过滤排序
2、Form：表单
layout=“inline” 布局模式
ref=“formRef” 表单dom引用
onValuesChange={this.valueChangeHD}当表单的值发生改变
initialValues={{scity：‘全部’，smode：‘全部’}}
表单初始值
3、Form.item
name 表单的名称
4、Select
Select.Option
value值
5.arr.filter(item=>true||false)
如果返回的撒true则当前item被保留
如果返回的撒false则当前item被过滤
6.创建页面
page：存放页面的文件夹
City：文件夹
inde.css
inde.js
图片等资源
导入可以省略index.js
7.使用mockjs（拦截ajax返回假数据）
1、安装
npm imockjs -D
2、编写本地mockjs拦截文件
2.1导入mock
var Mock = require('mockjs')
2.2编写拦截api
Mock.mock需要拦截url（返回假数据）
