黑马 React 学习记录

短命女 2023-09-30 08:23 26阅读 0赞

# jsx的样式处理 #

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAc2VhOTUyOA_size_20_color_FFFFFF_t_70_g_se_x_16]

# react组件 #

## 1.react 组件介绍 ##

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAc2VhOTUyOA_size_20_color_FFFFFF_t_70_g_se_x_16 1]

## 2.react 组件的两种创建方式 ##

### 2.1 函数组件 ###

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAc2VhOTUyOA_size_20_color_FFFFFF_t_70_g_se_x_16 2]

### 2.2 类组件 ###

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAc2VhOTUyOA_size_20_color_FFFFFF_t_70_g_se_x_16 3]

### 2.3 抽离为独立js文件 ###

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAc2VhOTUyOA_size_20_color_FFFFFF_t_70_g_se_x_16 4]

## 3.react 事件处理 ##

### 3.1 事件绑定 ###

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAc2VhOTUyOA_size_20_color_FFFFFF_t_70_g_se_x_16 5]

### 3.2 事件对象 ###

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAc2VhOTUyOA_size_20_color_FFFFFF_t_70_g_se_x_16 6]

## 4.有状态组件和无状态组件 ##

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAc2VhOTUyOA_size_20_color_FFFFFF_t_70_g_se_x_16 7]

## 5.组件中的state和setState ##

### 5.1 state的基本使用 ###

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAc2VhOTUyOA_size_20_color_FFFFFF_t_70_g_se_x_16 8]

### 5.2 setState() 修改状态 ###

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAc2VhOTUyOA_size_20_color_FFFFFF_t_70_g_se_x_16 9]

## 6.事件绑定this指向 ##

### 6.1 箭头函数 ###

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAc2VhOTUyOA_size_20_color_FFFFFF_t_70_g_se_x_16 10]

### 6.2 Function.prototype.bind()![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAc2VhOTUyOA_size_20_color_FFFFFF_t_70_g_se_x_16 11] ###

### `6.3 class的实例方法` ###

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAc2VhOTUyOA_size_20_color_FFFFFF_t_70_g_se_x_16 12]

### 6.4总结 ###

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAc2VhOTUyOA_size_20_color_FFFFFF_t_70_g_se_x_16 13]

## 7.表单处理 ##

### 7.1受控组件的概念 ###

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAc2VhOTUyOA_size_20_color_FFFFFF_t_70_g_se_x_16 14]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAc2VhOTUyOA_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/115a7ade125143818df05a4bf3453420.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAc2VhOTUyOA==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAc2VhOTUyOA_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/b1ee5cde84384f84bf2fae72886fe8f5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAc2VhOTUyOA==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAc2VhOTUyOA_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/837c1ee065a14a8da642d31641119182.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAc2VhOTUyOA==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAc2VhOTUyOA_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/525a1ca667f14c568a4465f488acacd9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAc2VhOTUyOA==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAc2VhOTUyOA_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/8049899ccbfb4fdd8ace906ee87934c3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAc2VhOTUyOA==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAc2VhOTUyOA_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/99ff96a472bc4e9aaa9cbaf3137e5e67.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAc2VhOTUyOA==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAc2VhOTUyOA_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/fd9c0745f9074fc8a45ea5526385be47.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAc2VhOTUyOA==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAc2VhOTUyOA_size_20_color_FFFFFF_t_70_g_se_x_16 7]: https://img-blog.csdnimg.cn/36cfbf8f43e84507b5a544fc5abd7ab0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAc2VhOTUyOA==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAc2VhOTUyOA_size_20_color_FFFFFF_t_70_g_se_x_16 8]: https://img-blog.csdnimg.cn/7764437c5aa74334a0d22caf4d864974.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAc2VhOTUyOA==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAc2VhOTUyOA_size_20_color_FFFFFF_t_70_g_se_x_16 9]: https://img-blog.csdnimg.cn/916ecd449a014de888fe3917c0e39aed.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAc2VhOTUyOA==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAc2VhOTUyOA_size_20_color_FFFFFF_t_70_g_se_x_16 10]: https://img-blog.csdnimg.cn/25a4ec7b9d7146ea970e8e7c19206830.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAc2VhOTUyOA==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAc2VhOTUyOA_size_20_color_FFFFFF_t_70_g_se_x_16 11]: https://img-blog.csdnimg.cn/9a672062e3ed46879dbb6b0334238119.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAc2VhOTUyOA==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAc2VhOTUyOA_size_20_color_FFFFFF_t_70_g_se_x_16 12]: https://img-blog.csdnimg.cn/68e57dff72e54ab9b7ebedd554df61d4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAc2VhOTUyOA==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAc2VhOTUyOA_size_20_color_FFFFFF_t_70_g_se_x_16 13]: https://img-blog.csdnimg.cn/715c991f12bb4e869e4e10b22c6506a3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAc2VhOTUyOA==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAc2VhOTUyOA_size_20_color_FFFFFF_t_70_g_se_x_16 14]: https://img-blog.csdnimg.cn/9846dbf79bcd43d9bf87f969aa7e99ad.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAc2VhOTUyOA==,size_20,color_FFFFFF,t_70,g_se,x_16