react

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)=>

{item}

)}

5、react 组件创建

1.函数组件（无状态组件）

function ChildA (){

  return(

   

     

无状态组件

   

  )

函数（组件名）首字母要大写

2.类组件（有状态组件）

import React, { Component } from 'react'

导入react和组件方法

class ChidB extends Component {

    constructor(props) {

        super(props);

        this.state = {  };

    }

    render() {

        return (

           

               

有状态组件{this.props.num}

           

        );

    }

}

export default ChidB;

export default ChidB

导出

3.使用组件

1.导入

import  ChidB from './components/ChidB'

2.使用

 

6、react-props属性组件之间数据传参方式

1.传递参数

 

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、表单额双向绑定

11、子组件如何向父组建传参

1.在父组件里面定义方法

changeColor=v=>this.setState({color:v})

2.在父组件传递参数

stepper changeColor={this.changeColor)

3.在子组件中调用方法

this.props.changeColor('orange')}

12、动态的class

className

this.changeColor('red')}>红

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.路由参数

配置：

使用：

获取参数：

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文档

按钮

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（返回假数据）