# github_SearchList

**Repository Path**: chen-hongxin/github_-search-list

## Basic Information

- **Project Name**: github_SearchList
- **Description**: 基于 React 实现的一个 github 搜索案例
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2021-07-29
- **Last Updated**: 2021-09-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React

## README

# github_SearchList

### github搜索案例相关知识点
- 设计状态时要考虑全面，例如带有网络请求的组件，要考虑请求失败怎么办。
- ES6小知识点：解构赋值+重命名
```
    let obj = {a:{b:1}}
    const {a} = obj; //传统解构赋值
    const {a:{b}} = obj; //连续解构赋值
    const {a:{b:value}} = obj; //连续解构赋值+重命名
```

- 消息订阅与发布机制
    - 1.先订阅，再发布（理解：有一种隔空对话的感觉）
    - 2.适用于任意组件间通信
    - 3.要在组件的 componentWillUnmount 中取消订阅
- fetch发送请求（关注分离的设计思想）
				
```
    try {
        onst response= await fetch(`/api1/search/users2?q=${keyWord}`)
        const data = await response.json()
        console.log(data);
    } catch (error) {
        console.log('请求出错',error);
    }
```




### 使用说明
- 1. 命令行输入` npm install` 安装所需要的包<br>
![输入图片说明](https://images.gitee.com/uploads/images/2021/0922/100527_377c68f2_8035370.jpeg "1632235935(1).jpg")
- 2. 运行服务器：在 server 文件夹的路径下输入命令 `npm start`<br>
![输入图片说明](https://images.gitee.com/uploads/images/2021/0921/223156_badaaff4_8035370.jpeg "1632234678(1).jpg")
- 3. 将三个文件夹中的某一个改名为 src（三个文件夹是三个不同版本，代码有差异）
    - 第一个文件夹是原始版本：使用 xhr 发送网络请求、使用 props 在父子组件间传递数据
    - 第二个文件夹改动处为：使用了消息订阅与发布机制代替 props
    - 第三个文件夹改动处为：使用了 fetch 代替 xhr 发送网络请求
- 4. 命令行输入 `npm start` 运行程序<br>
![输入图片说明](https://images.gitee.com/uploads/images/2021/0922/100533_bef91de4_8035370.jpeg "1632236025(1).jpg")

### 页面展示
![输入图片说明](https://images.gitee.com/uploads/images/2021/0921/222902_f986c3d3_8035370.jpeg "1632234452(1).jpg")