REACT的学习心得三：组件详解

落日映苍穹つ 2023-10-08 08:04 12阅读 0赞

**目录**

一：组件三大属性之一：props属性

1：每个组件对象都有props属性（默认为空）

2：组件内部标签的所有属性都存在props中（某次实例中传入的属性都默认在props中）

3：内部读取某个值的：this.props.propsname

4：通过标签属性从组件外传递至组件内（只读）

5：设置组件的默认props值：

6：设置props属性的必要性和数据类型（需要先引入库（））

7：组件嵌套

二：组件三大属性之refs

1）refs属性

1：组件内的标签都可以定义ref属性来标识自己

2：组件中可以通过this.refs.refName来得到真实的DOM对象

3：作用：用于操作指定的ref属性dom元素对象（表单标签居多）

2）：事件处理：

1：通过onXxx属性指定组件的事件处理函数

1：React是通过自定义（合成）事件，而不是使用的DOM事件

2：注：在自定义方法内我们指定的this指向null，内置方法对象指向实例对象

3：event.target:获取元素本身对象

三：组件三大属性之state

1：组件被称为状态机，通过更新组件的状态值来更新对应页面的显示（重新渲染）

2：初始化状态

3：读取某个状态值：this.state.statepropeName

4:更新状态------->组件界面更新

四：受控组件；

1：Recat是一个单向数据流，但可以自定义双向数据流组件

2：案例：

五：组件的生命周期；

1：生命周期图；

1：初始化渲染-》构造方法-》 组件将要被挂载时执行的方法-》渲染render-》组件挂载完毕时执行的方法

2：上述方法除了reder（）都会执行一次

3：组件渲染前执行方法，方便用户发送ajax请求，开启定时器。

4：加上组件被修改的方法执行顺序；

5：加上文件被销毁方法的执行顺序；

六：虚拟DOMDiff算法：最小页面重绘。

--------------------

# 一：组件三大属性之一：props属性 #

## 1：每个组件对象都有props属性（默认为空） ##

## 2：组件内部标签的所有属性都存在props中（某次实例中传入的属性都默认在props中） ##

## 3：内部读取某个值的：this.props.propsname ##

## 4：通过标签属性从组件外传递至组件内（只读） ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70][]

工厂函数用声明形参：

![20191010154720691.png][]

## 5：设置组件的默认props值： ##

![20191010151853278.png][]

## 6：设置props属性的必要性和数据类型（需要先引入库（）） ##

![20191010152540810.png][]

## 7：组件嵌套 ##

组件嵌套：就是利用组件属性不断地传递参数

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 1][]

# 二：组件三大属性之refs #

## 1）refs属性 ##

### 1：组件内的标签都可以定义ref属性来标识自己 ###

### 2：组件中可以通过this.refs.refName来得到真实的DOM对象 ###

### 3：作用：用于操作指定的ref属性dom元素对象（表单标签居多） ###

this.refs.username:返回input对象

## 2）：事件处理： ##

### 1：通过onXxx属性指定组件的事件处理函数 ###

### 1：React是通过自定义（合成）事件，而不是使用的DOM事件 ###

React中的事件是通过委托方式进行处理的（委托给组件最外层的元素）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 2][]

### 2：注：在自定义方法内我们指定的this指向null，内置方法对象指向实例对象 ###

在render中标签必须有结束标签

解决办法：强制绑定；

1：构造函数绑定

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 3][]

### 3：event.target:获取元素本身对象 ###

# 三：组件三大属性之state #

## 1：组件被称为状态机，通过更新组件的状态值来更新对应页面的显示（重新渲染） ##

## 2：初始化状态 ##

constructor(props)\{

super(props);

this.state=\{

stateProp1:value1

\};

## 3：读取某个状态值：this.state.statepropeName ##

## 4:更新状态------->组件界面更新 ##

this.setState(\{

stateProp1:value1

\});

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 4][]

案例：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 5][]

# 四：受控组件； #

## 1：Recat是一个单向数据流，但可以自定义双向数据流组件 ##

## 2：案例： ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 6][]

# 五：组件的生命周期； #

## 1：生命周期图； ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 7][]

### 1：初始化渲染-》构造方法-》 组件将要被挂载时执行的方法-》渲染render-》组件挂载完毕时执行的方法 ###

### 2：上述方法除了reder（）都会执行一次 ###

### 3：组件渲染前执行方法，方便用户发送ajax请求，开启定时器。 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 8][]

### 4：加上组件被修改的方法执行顺序； ###

![20191014142936450.png][]

### 5：加上文件被销毁方法的执行顺序； ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 9][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 10][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 11][]

# 六：虚拟DOMDiff算法：最小页面重绘。 #

哪里改变了，哪里更改他。没有更改的就不弄。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191010151632622.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70
[20191010154720691.png]: https://img-blog.csdnimg.cn/20191010154720691.png
[20191010151853278.png]: https://img-blog.csdnimg.cn/20191010151853278.png
[20191010152540810.png]: https://img-blog.csdnimg.cn/20191010152540810.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191010154821700.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2019101120382197.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191011204717827.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191014104522785.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191014110622325.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20191014112927307.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20191014113131812.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20191014142829761.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70
[20191014142936450.png]: https://img-blog.csdnimg.cn/20191014142936450.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20191014143334231.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20191014140811821.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20191014145228236.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70