react学习笔记
创建文件
- npm i create-react-app -g 全局安装create-react-app
- create-react-app
文件名
创建文件
发布与订阅
- 安装
npm i pubsub-js
- 引入
import PubSub from 'pubsub-js'
- 发布事件:
PubSub.publish('List', data.items)
- 订阅事件:
this.token = PubSub.subscribe('List', this.mySubscriber)
- 取消订阅:
PubSub.unsubscribe(this.token)
- 事件名为
List
, 发布事件时传递的数据为data.items
, 事件发布后订阅者触发的事件为this.mySubscriber
路由
- npm i react-router-dom 安装
import { NavLink, Route, Routes } from 'react-router-dom'
引入NavLink, Route, Routes- 示例:
<NavLink style={nav} to="/about">about</NavLink> <Routes> <Route path="/about" element={<About />} /> </Routes>
- 给子组件占位
三种传参方式:params、search、state
params
-
传递参数 <NavLink to={`/home/${id}`}>home</NavLink>
-
接收参数 <Route path="detail/:id" element={<Detail />} /> 需要声明接收的参数
search
-
传递参数 <NavLink style={li} to={`/home?value=${b}`}>home</NavLink>
-
接收参数 <Route path="/home/msg" element={<Msg />}></Route> 不需要声明接收的参数
state
-
传递参数 <NavLink style={li} to={{ pathname: '/msg', state: { value: b } }}>msg</NavLink>
-
接收参数 <Route path="/msg" element={<Msg />}></Route> 不需要声明接收的参数 清空缓存会丢失数据
使用两种参数的方式(只能在函数类型的组件里用)
import { useParams, useLocation } from 'react-router-dom'
- 使用params参数 useParams():
const params = useParams()
- 使用search参数 useLocation():
const { search } = useLocation()
qs
- 安装
npm i query-string
- 对象转化成urlencoded编码
qs.stringify(stu)
=> ‘age=3&name=tom’ - urlencoded编码转化成对象
qs.parse(search.slice(1))
UI组件库使用 antd
- 安装
npm i antd --save
- 使用组件
import { Select, Button } from 'antd';
- 其他的上官网看 antd官网
redux
- 安装
npm i redux --save
模块学习
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1R54sGF3-1645612435329)(./public/redux原理图.png)]
action
- 同步action: 返回值为对象类型
export const createIncreAction = data => ({type: INCREMENT, data})
- 异步action: 返回值为函数类型
export const createAsyncIncreAction = (data, time) => {
return (dispatch) => {
setTimeout(() => {
dispatch(createIncreAction(data))
},time)
}
}
reducer
- 本质是一个函数
- 示例:
export default function countReducer(pre, action) {
const { type, data } = action
switch (type) {
case INCREMENT:
return pre + data*1;
case DECREMENT:
return pre - data*1;
default:
return 0;
}
}
store
- 引入需要的模块
import {createStore, applyMiddleware} from 'redux' //引入createStore创建store
import thunk from 'redux-thunk' //中间件 可以实现异步分发(dispatch)
- 创建store
export default createStore(countReducer, applyMiddleware(thunk))
组件内使用store
- 引入
store、action
文件
import store from '../../redux/store'
import { createIncreAction, createDecreAction, createAsyncIncreAction } from '../../redux/count_action'
- 获取store存的变量
store.getState()
- 修改变量
store.dispatch(createIncreAction(this.state.data))