# react_learning

**Repository Path**: xiao_xue_er/react_lear

## Basic Information

- **Project Name**: react_learning
- **Description**: 学习千锋2022版React全家桶教程_react零基础入门到项目实战完整版的纪录
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2022-02-21
- **Last Updated**: 2022-12-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<!--
 * @Author: Wxx
 * @Date: 2022-02-21 14:38:17
 * @LastEditors: Wxx
 * @LastEditTime: 2022-03-01 17:08:48
 * @Description:
-->

# 一、redux 学习

<font color=#999AAA >redux 最主要是用作应用状态的管理。简言之，Redux 用一个单独的常量树状态树（state 对象）保存这一整个应用的状态，这个对象不能直接被改变，当一些数据变化了，一个新的对象就会被创建（使用 actions 和 reducers),这样就可以进行数据追踪。

## 1.引入库

<font color=#999AAA >代码如下（示例）：

```c
npm i redux
```

## 2.redux 介绍及设计和使用的三大原则

1. state 以单一对象存储在 store 对象中
2. state 只读（每次都返回一个新的对象）
3. 使用纯函数 reducer 执行 state 更新

## 3.redux 介绍及设计和使用的三大原则

如果是多人合作 需要把 reducer 拆分出去 在通过 combineReducers 进行合并

```
const reducers = combineReducers({
  Tabbar,
  City,
});
```

合并之后再要通过 store 拿 state 的值时需要 store.getState().Tabbar.show 这种样子去拿，如果不需要合并之前是 store.getState().show 直接就去拿了，不需要在嵌套一次。

## 4.引入中间件 redux-thunk 解决异步的 action

<font color=#999AAA >安装

```
npm i redux-thunk
```

<font color=#999AAA >使用

```
import thunk from "redux-thunk";
...
const store = createStore(reducers, applyMiddleware(thunk));
```

# 二、性能优化

1、函数组件用 mem  
2、class 组件用 pureComponent
3、class 组件用 shouldComponentUpdate