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