# react-admin

**Repository Path**: hulutech/react-admin

## Basic Information

- **Project Name**: react-admin
- **Description**: react-admin,react后台管理脚手架项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-10-04
- **Last Updated**: 2024-10-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 总结react
### 1.基础
#### 1.1状态与生命周期
useState: 1. 保存数据，数据会触发组件更新,返回2个函数，一个是被观察的数据，第二个是修改数据的函数
useEffect: 1. 依赖项为空数组时，相当于componentDidMount，可以携带参数，触发条件为当携带参数发生变化时，触发该函数
useRef: 1. 获取dom元素，2. 获取组件实例，3. 保存数据，数据不会触发组件更新
#### 1.2 JSX
1. 语法糖，可以写html标签，也可以写js表达式，可以写函数
2. 事件绑定，需要使用驼峰命名法，并且需要使用{}包裹
3. 样式绑定，需要使用对象的形式，并且需要使用{}包裹
4. 条件渲染，可以使用三元运算符，也可以使用逻辑运算符
5. 列表渲染，需要使用map函数，并且需要使用key属性
6. 表单渲染，需要使用受控组件，需要使用onChange事件，需要使用value属性
#### 1.3 组件
定义一个函数，返回一个jsx语法的并导出，使用时直接调用即可
#### 1.4 组件通信
1. 父传子：props
2. 子传父：props+回调函数
3. 兄弟组件：父组件作为中间人，通过props传递数据
4. 父组件传子组件：props
5. 子组件传父组件：props+回调函数
### 2.react-redux
```js
import { configureStore } from '@reduxjs/toolkit'
import TabReducer from './reducers/tab'

export default configureStore({
    reducer: {
        tab: TabReducer
    }
})
```
```js
import { createSlice } from '@reduxjs/toolkit'

const tabSlice = createSlice({
  name: 'tab',
  initialState: {
    isCollapse: false,
    tabsList: [
      {
        path: '/',
        name: 'home',
        label: '首页'
      }
    ],
    currentMenu: {}
  },
  reducers: {
    collapseMenu: state => {
      state.isCollapse = !state.isCollapse
    },
    selectMenuList: (state, { payload: val }) => {
      if (val.name !== 'home') {
        state.currentMenu = val
        const result = state.tabsList.findIndex(item => item.name === val.name)
        if (result === -1) {
          state.tabsList.push(val)
        }
      } else {
        state.currentMenu = null
      }
    },
    closeTab: (state, { payload: val }) => {
      let res = state.tabsList.findIndex(item => item.name === val.name)
      state.tabsList.splice(res, 1)
    },
    setCurrentMenu: (state, { payload: val }) => {
      if (val.name === 'home') {
        state.currentMenu = {}
      } else {
        state.currentMenu = val
      }
    }
  }
})
export const { collapseMenu, selectMenuList, closeTab, setCurrentMenu } = tabSlice.actions
export default tabSlice.reducer
```
使用：设置值
```js
import { useDispatch } from "react-redux";
import { collapseMenu } from '../../store/reducers/tab'
const dispatch = useDispatch()
 dispatch(collapseMenu())
```
使用：获取值
```js
import { useSelector } from 'react-redux'
const tabsList = useSelector(state => state.tab.tabsList)
```

### 3.react-router-dom

路由是react-router-dom提供的一个组件，用于实现单页面应用的路由功能，可以通过路由组件的props中的history对象获取到路由信息，并且可以通过history对象的push方法跳转到其他页面
Outlet类似于vue中的route-view，用于渲染路由组件
```js
import { Outlet } from 'react-router-dom';
```
```js
<div className="App">
      <RouterProvider router={router} />
</div>
```