react语法以及基本使用

定义

facebook
meta 出品的一款构建javascript应用的库
单向数据流
组件
虚拟dom节点

安装与创建

安装：
npm i create-react-app -g
安装脚手架

create-react-app myreact
创建项目

cd /myreact
进入项目目录

npm start  启动项目
npm run eject  暴露webpack配置文件
npm run build 打包项目

jsx语法

javascript混合xml（html）语法格式
目的更好的在javascript中写html模板

特点:
1. 只有一个根节点
2. {} 写javascript
3. 数组可以直接写html标签
4. 对象样式自动展开
5. {/* 注释*/}
6. 类名用className

函数组件

无状态组件组件/
视图组件/

function App {
   return (<></>)
}
export default App;

类组件

有状态组件/
容器组件

import React,{Component} from 'react'

export default class App extends Component{
    render(){
        return(<></>)
    }
}

模板语法

1.文本渲染

文本渲染
{}

html文本渲染
dangerouslySetInnerHTML={{__html:xxx}}

2.条件渲染

三元运算符号
条件?<>:<>

&&符号
{{条件&&<>}}

3.列表渲染

this.state.list.map(item=><h3 key={item}>{item}</h3>)

事件

和普通js事件一致，需要驼峰式写法
onClick={this.sayHi}
onClick={()=>{this.sayHi(参数)}}
onClick={this.sayHi.bind(this,参数)}

更新状态

this.setState({k:v})
this.setState({k:v},()=>console.log("执行完毕的回调函数"))

dom节点引用

非受控表单

import {createRef} from ‘react’
this.inpRef = createRef()

<iput ref={this.inpRef}>

this.inpRef.current 获取节点

表单双向绑定

受控表单

<input value={this.state.msg} 
onChange={(e)=>this.setState({msg:e.target.value})}>

函数组件        类组件的区别

1.函数组件：

简单
props
建议多用

2.类组件

复杂
state状态
生命周期
props
this

react生命周期

挂载

constructor构造函数
static getDerivedStateFromProps
监听porps更新state
render渲染
componentDidMount
组件已经挂载

更新

static getDerivedStateFromProps
监听porps更新state
shouldComponentUpdate(nextProps,nextState){}
组件是否更新
render渲染函数
getSnapshotBeforeUpdate()
更新获取快照
返回的数据是 cdu 的第三个参数
componentDidUpdate
组件已经更新

卸载

componentWillUnmount
组件将要卸载

reactHook

在函数组件里面模拟生命周期和状态state

 useState使用状态

const  [num,setNum] = useState(10)

useEffect 模拟生命周期

第一个参数回调函数：模拟组件已经挂载完毕，组件更新完毕
第一个参数的返回值：模拟组件将要卸载
第二参数：依赖数据

useRef 使用Dom引用

const inpRef = useRef()
<input ref={inpRef}>
inpRef.current.value

useCallback 使用回调缓存
执行一个函数
useMemo使用缓存
（返回一个函数）
useLayoutEffect 视图发生变化
useReducer 集中数据管理器 （模拟reduce）
useContext 使用上下文（跨层级传参）
createContext 创建上下文

路由

安装 

npm i react-router-dom@5.0 -S

路由组件

BrowserRouter 浏览器路由
HashRouter 哈希路由

NavLink 导航链接

exact精确匹配
to 链接地址
class="active"
匹配状态

Route 路由容器

exact精确匹配
（路径和配置的path完全匹配）
path 路由地址
component 组件

<Redirect> 重定向

to 去哪儿
from 从那

<Switch> 匹配一个路由

<Prompt>
路由离开调用弹框

 when 当条件为真
message 弹出文本内容

<Link>
跳转

to=“/login”
to={{
pathname:"/login",
search:"name=mumu&age=18",
hash:"#good",
state:{redirect:"xxx"}
}}

参数 props里面的location一致的

404

1. Switch 包裹（一次匹配一个）
2. path=“*”
3. 配置放在最后面

路由的参数 

path="produce/:id”
切换 to=“/produce/abc”
获取：props.match.params.id

子路由

 

在主路由添加
  <div>
          <Route path="/admin/dash" component={Dash}></Route>
          <Route path="/admin/orderlist" component={OrderList}></Route>
          {/* 重定向 */}
          <Redirect path="/admin" to="/admin/dash"></Redirect>
       </div>

权限配置

<Private path="/admin">
    <Admin></Admin>
</Private>

function Private({children,...rest}){
    return <Route {...rest} render={({location})=>localStorage.getItem('isLog')?(children):<Redirect to={{pathname:"/",state:{redirect:location.pathname}}}>}></Route>
}

路由传参

params

<Route path="/produce/:id">
<Link to="/produce/abc">
props.match.params.id

state

传递
<Link to={{pathname:"/admin",search:"name=mumu&age=18",state:{redirect:"/admin"}}}>
获取state
props.location.state.redirect

search

路由props

 match
匹配的路由

params
路由的参数
isExact
是否精确匹配
path路径
url 地址

 history
历史记录

push 跳转
replace 替换历史记录
go跳转历史记录
goBack 返回
goForward 前进 
linsten 监听
location 同 location
length 长度

 location
地址栏信息

hash哈希值
pathname地址名称
search 查询信息
state跳转传入数据

只有 Route 对应的component才有这三个自动注入参数 

react代理 

安装：
npm i http-proxy-middleware

src目录
setupProxy.js

// 导入代理中间件

const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = function (app) {
    app.use("/member",
        createProxyMiddleware({
            target: 'http://www.520mg.com',
            changeOrigin: true
           
        })
    )
}

封装request

1. 导入

import axios from 'axios'
import qs from 'qs'

2. 创建

const request = axios.create({
  baseURL:"/",
  timeout:5000,
 headers:{post:{"Content-Type": "application/x-www-form-urlencoded"}}
})

3. 拦截

request.intercepters.request.use(function(config){},function(err){})

request.intercepters.response.use(function(res){},function(err){})

4. 扩展

request.jsonp = function(){}

5. 导出

export default request

api

//导入

import request from ‘xxx’
const login = (data,config)=>request.post(url,data,config)
export {login}

redux

全局状态管理器

 定义

import {createStore} from 'redux'

function reducer(store=0,action){
		switch action.type{
		case xxx:
		return {};
		default :
	}
}

const store = createStore(reducer);
export default store;

主要方法

store.getState()获取状态store

store.dispatch({type,val})发送事件action，执行reducer更新state
store.subscribe(()=>{})

监听store变化执行回调函数

异步

createStore创建仓库applyMiddleware处理插件
import icreateStore.applyMiddleware} from 'redux"
//导入异步中间件
import thunk from 'redux-thunk'
//创建仓库
const store = createStore(reducer,applyMiddleware(thunk));
定义异步方法
function GetUse(){
	return dispatch=>{
		dispatch()
	}
}
调用
GetUser()(store.dispatch)

antd

UI框架库

使用

1.安装
npm i and -S

2.导入css
@import '~antd/dist/antd.css';

3.使用
import {Button} form 'antd'
<Button></Button>

快速高效的使用

//组件有使用子组件

import {Select} form 'antd'
<Select.Option></Select.Option>

const {Option} = Select
<Option></Option>

组件的属性
    on开头是事件
其他属性
子组件属性

快速高效的使用

通常需要同ref一起使用
ref={this.inpRef}
this.inpRef.current.getFieldsValue()
可以获取到组件实例上面所有方法