# learn_react

**Repository Path**: mountyas793/learn_react

## Basic Information

- **Project Name**: learn_react
- **Description**: learn_react学习react基础仓库
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-11-01
- **Last Updated**: 2024-12-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React

## README

# Learn to react

## 第一章：React 入门

### 安装与介绍

#### 介绍

学习react知识记录


#### 说明

##### react特点

1.采用**组件化模式**，**声明式编码**，提高开发效率和代码复用率

2.在React Native中可以使用React语法进行**移动端开发**

3.使用**虚拟DOM**+优秀的**Diffing 算法**，尽量减少与真实DOM的交互（不会重复加载已存在的DOM数据）


##### react前置技能库

![1698802312126](image/READEME/1698802312126.png)


##### react依赖包

react依赖包有三个：

1.react.min.js            //react的核心包

2.react-dom.min.js   //react 操作dom的包

3.babel.min.js          //转译包


##### 安装react 两种方法：

1.直接使用cdn

路径如下：（生产环境中不要用）

```html
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
```

2.使用npm 安装 create-react-app命令

 1.先安装npm 或者 cnpm

 2.npm install -g create-react-app

 3.create-react-app my-app

 4.cd my-app/

 5.npm start

然后在浏览器中打开http://localhost:3000 出现react的六芒星就好了

## 第二章：React 面向组件编程

### 一、React三大属性之State总结

#### 1.1理解

1.state 是组件对象最重要的属性，值是对象(可以包含多个 key-value 的组合)

2.组件被称为“状态机”通过更新组件的 state 来更新对应的页面显示(重新染组件)

#### 1.2特别注意

1.组件中 render 方法中的 this 为组件实例对象

2.组件自定义的方法中 this 为 undefined，如何解决?

    a. 强制绑定 this:通过函数对象的 bind()
    
    b. 箭头函数

3.状态数据，不能直接修改或更新

### 二、React三大属性之Props总结

#### 2.1理解

1.每个组件对象都会有 props 属性

2.组件标签的所有属性都保存在 props 中

#### 2.2作用

1.通过标签属性从组件外向组件内传递变化的数据

2.注意:组件内部不要修改props数据

#### 2.3编码操作

1.内部读取某一个值

```js
this.props.name
```

2.对props中的属性进行类型限制和必要性限制

```js
// Person类组件中简写
static Person.propType{
    name: PropType.string.isrequired,  // 调用PropType库，限制name属性数据类型为string，并且必填
}
```

3.扩展属性：将对象的所有属性通过props传递

```js
// Person类组件，批量传递参数
const p = [1, 2, 3, 4, 5, 6]
<Person {...P} />  //将p中的数据批量传递给Person类，并通过Babel解析读取列表
```

4.默认属性

```js
// 方式一（放在Person类或者函数外边, 类和函数通用）
Person.defultProps = {
    age:18,  // 默认年龄18
    sex:"男"
}

// 方式二（类方法简写，放在类里边）
static defultProps = {
    age:18,  // 默认年龄18
    sex:"男"
}
```

### 三、React 生命周期(生命周期钩子)

#### 3.1生命周期三个阶段(旧)

![image-20231117095441002](README/image-20231117095441002.png)

1.**始化阶段**: 由 ReactDOMrender() 触发---初次染

* constructor()
* componentWillMount()

* render()
* componentDidMount()

2.**更新阶段**: 由组件内部 this.setSate() 或父组件重新 render 触发

* shouldComponentUpdate()
* componentWillUpdate()
* render()
* componentDidUpdate()

3.卸载组件:由 ReactDOM.unmountComponentAtNode() 触发

* componentWillUnmount()

**常用钩子**：

rander  (初始化渲染钩子)  ：必不可少

componentDidMount  (挂载完成钩子)  ：一般在这个钩子中做一些初始化的事，例如: 开启定时器、发送网络请求、订阅消息

componentWillUnmount  (将要卸载钩子)  ： 一般在这个钩子中做一些收尾的工作，例如: 关闭定时器、取消订阅

#### 3.2生命周期三个阶段(新)

![image-20231117095555575](README/image-20231117095555575.png)

1.**初始化阶段**:由ReactDOM.render()触发 --- 初次渲染

1. constructor()
2. **getDerivedStateFromProps()**
3. render()
4. componentDidMount()

2.**更新阶段**: 由组件内部this.setSate()或父组件重新 render 触发

1. **getDerivedStateFromProps()**
2. shouldComponentUpdate()
3. render()
4. **getSnapshotBeforeUpdate()**
5. componentDidUpdate()

3.**卸载组件**:由 ReactDOMunmountComponentAtNode()触发

  1.componentWillUnmount()

**重要钩子**

1.rander：初始化渲染或更i性能渲染调用

2.componentDidMount： 开启监听， 发送 ajax 请求

3.componentWillUnmount： 做一些收尾工作， 如：清理定时器

## 第三章：React  应用(基于  React  脚手架)

### 3.1使用create-react-app 创建react应用

#### 3.1.1react  脚手架

1.xxx脚手架：用来帮助程序员快速创建一个基于xxx库的模板项目

1. 包含了所有需要的配置 (语法检查、jsx 编译、devServer...)
2. 下载好了所有相关的依赖
3. 可以直接运行一个简单效果

2.react  提供一个用于创建 react 项目的脚手架库：create-react-app

3.项目的整体技术架构为：react + webpack + es6 + eslint

4.使用脚手架开发的项目特点：模块化、组件化、工程化(自动完成一系列开发流程：代码检查、图片检查。。。)

#### 3.1.2创建项目并启动

全局安装：

```shell
npm install -g create-react-app
npm i -g create-react-app
```

切换到想要创建项目的目录：

```shell
create-react-app [projctName]
```

进入项目文件夹：

```shell
cd [projctName]
```

四、启动项目：

```shell
npm start
```

#### 3.1.3react 脚手架项目结构

public——静态资源文件夹
	favicon.icon ------网站页签图标
	**index.html -------- 主页面**
	logo192.png------- logo图
	logo512.png------- logo图
	manifest,json -----应用加壳的配置文件
	robots.txt--------爬虫协议文件
src——源码文件夹
	App.css--------App 组件的样式
	**App.js --------App 组件**
	App.testjs ---- 用于给App 做测试
	index.css ------样式
	**index.js -------入口文件**
	logo.svg-------- logo 图
	reportWebVitals.js---页面性能分析文件(需要web-vitals 库的支持)
	setupTests.js---组件单元测试的文件(需要jest-dom 库的支持)

### 3.2功能化界面的组件化编码流程（通用）

1.拆分组件：拆分界面，抽取组件

2.实现静态组件：使用组件实现静态页面效果

3.实现动态组件

​	3.1动态显示初始化数据

​		3.1.1数据类型

​		3.1.2数据名称

​		3.1.3保存在哪个组件

​	3.2交互（从绑定事件监听开始）

## 第四章：React axios

### 4.4消息订阅-发布机制

1.工具库：PuSubJs

2.下载：

```shell
npm install pubsub-js --save
yarn add pubsub-js
```

3.使用

```js
// 引入
import PubSub from 'pubsub-js'
// 订阅
PubSub.subscribe('delete', function(msg, data)=>{
    
})
// 发布消息
PubSub.publish('delete', data)
```

## 第五章：React 路由

### 5.1 相关理解

#### 5.1.1 SPA的理解

	1. 单页Web应用（single page web application，SPA）
 	2. 整个应用只有一个完整的页面
 	3. 点击页面中的链接不会刷新页面，只会做页面的局部更新。
 	4. 数据都需要通过 Ajax 请求获取， 并在全段异步展示。

### 5.2 react-route相关API

 1. #### 什么是路由

     	1. 一个路由就是一个映射关系（key：value）
          	2. key 为路径， value 可能是 function 或者 component


### 5.3 基本路由使用
 1. #### 导入路由组件

 	```shell
 	// 下载 react-router-dom 5版本
 	yarn add react-router-dom@5
 	```

### 5.4 嵌套路由使用

### 5.5 向路由组件船体参数数据

### 5.6 多种路由跳转方式

## 第六章： redux

### 6.1 redux理解

####   6.1.1  学习文档

​	中文文档：https://cn.redux.js.org/

####   6.1.2 redux是什么

1. redux是一个专门用于做**状态管理**的 JS 库(不是 react 插件库)。
2. 它可以用在 react, angular, vue 等项目中, 但基本与 react 配合使用。
3. 作用:集中式管理 react 应用中多个组件**共享**的状态。

####   6.1.3 什么情况使用 redux

1. 某个组件的状态，需要让其他组件可以随时拿到(共享)。
2. 一个组件需要改变另一个组件的状态(通信)。
3. 总体原则: 能不用就不用如果不用比较吃力才考虑使用。

####   6.1.4 redux 工作流程图& redux的三个核心概念

![image-20240104103745720](README/image-20240104103745720.png)

1.  Action ：