# react-student-teacher-table-v1-demo

**Repository Path**: kevinleeeee/react-student-teacher-table-v1-demo

## Basic Information

- **Project Name**: react-student-teacher-table-v1-demo
- **Description**: 案例：选课表格列表(常规写法)

后端提供学生列表和教师列表两个数据

**实现功能：**

- 请求后端数据获取学生和教师列表
- 渲染学生列表
- 渲染教师列表
- 增加删除操作
- 增加喜欢操作
- 常规写法
- 高阶组件写法
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-02-02
- **Last Updated**: 2022-02-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

**案例：选课表格列表**

后端提供学生列表和教师列表两个数据



**实现功能：**

- 请求后端数据获取学生和教师列表
- 渲染学生列表
- 渲染教师列表
- 增加删除操作
- 增加喜欢操作
- 常规写法
- 高阶组件写法

**案例展示图：**

![image-20220202021236600](https://gitee.com/kevinleeeee/blog-hexo-image-bed/raw/master/img//image-20220202021236600.png)



***问题：常规写法有什么弊端？***

APP组件把所有的数据暴露在跟APP组件无关的地方，APP组件的作用只是承载视图汇总，像请求数据，子组件需要的函数方法也在APP组件里，这样会造成APP组件非常的臃肿



***问题：高阶组件写法如何实现？***

1. 抽离不相关的数据和方法
2. 封装一套程序方法兼容两个不同数据的请求



**项目目录：**

```
//常规写法
├─index.html
├─package.json
├─Readme.md
├─src
|  ├─App.jsx - 管理视图/请求后端数据/缓存后端数据/定义修改子组件的方法
|  ├─index.jsx - 入口文件/挂载渲染组件
|  ├─model
|  |   └index.js - 请求后端的函数方法
|  ├─components
|  |     ├─StudentList.jsx - 表格列表视图的子组件
|  |     └TeacherList.jsx - 表格列表视图的子组件
├─server
|   ├─index.js
|   ├─package.json
|   ├─data
|   |  ├─students.json
|   |  └teachers.json
```



**源码地址：**

- 常规写法：https://gitee.com/kevinleeeee/react-student-teacher-table-v1-demo