# s_1910A_react

**Repository Path**: wyp0712/s_1910A_react

## Basic Information

- **Project Name**: s_1910A_react
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-02-18
- **Last Updated**: 2022-03-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# s_1910A_react

# react 技术总结：

1. 虚拟 dom
2. create-react-app
3. jsx 语法（10 点）
4. 组件

- 父子、子父、嵌套）
- 组件封装思想（）
- 父组件也可以使用函数组件--react hook (useState / useEffect / useRoutes / useLocation / useParams)

5. hoc 高阶组件（复用逻辑）4 种使用场景

withRouter 复用 导航守卫逻辑
withControl 复用受控组件逻辑

6. ref 获取真实 dom 节点

- createRef()
- findDomNode
- useRef()

7. React.createContext() 嵌套组件传递参数

8. 路由（v6 版本）（5 个基本概念）

9. redux

- react-redux 组件连接
- redux-thunk 异步处理插件

# react 需求分析：

# ui 框架 ant design / ant design mobile

# pc / mobile

mobile:

1. 适配+三段式布局
2. 路由搭建/layouts
3. 列表渲染（上拉加载，下拉）（myScroll 组件）
4. better-scroll (插件)
5. 防抖/节流 （loadsh.js）
6. 导航守卫（withRouter）token hoc
7. 路由懒加载
8. 图片懒加载 （antd-mobile）
9. 轮播图 (插件)
10. 跳转详情（动态路由带参数）
11. 异步 使用 redux-thunk
12. 增删改查
13. 参数校验/组件划分
14. 模糊搜索功能
15. 切换功能 tab
16. 收藏/购物车类效果

### pc: / antd

1. 布局（左边固定，右边自适应）
2. 登陆/token / 用户信息展示
3. 导航守卫
4. 图片懒加载
5. 搜索（防抖）
6. 分页
7. 弹出框（修改/增加）
8. 删除
9. 排序

分页使用 antd

#### 前端优化

1. 性能优化

```js
componentWillUnMount() {
 this.bs = null
}

// 组件性能优化

memo(function()  {

})

// 类组件
class App extends PureComponent {}


```

2. 数据边界问题（）这个数据展示到没有 提示

```js

移动端：上拉加载，加载到数据结束，就提示，数据结束
pc端： antd 自带 数据 提示

```

3. 防抖截流

```js

```

# 安装的前端插件

devDependencies:

1. mockjs
2. sass
   Dependencies:
3. axios
4. antd-mobile
5. redux
6. redux-thunk
7. react-redux
8. react-router-dom
9. better-scroll
10. qs

# -->