2-React JSX基础 事件绑定 组件基础使用 useState 基础样式控制

## 一：概念和本质
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/f0d34564-149b-493d-ad4f-3c269fcf6ba4.png)
## 二：识别js表达式
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/4419cf14-fd10-4dda-8576-82d8cee3cf41.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/83b7c16c-6a0f-4f4d-bd39-2262de680582.png)
## 三：实现列表渲染
使用map方法，循环哪个结构就return哪个结构
※：加上一个独一无二的key,字符串或者number(id)
item：表示遍历出来的每一项
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/488fcdc2-70aa-403a-954e-6eb4e71f23a4.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/832a6b0b-d237-4c9e-a036-9059e4db89f2.png)
## 四：实现基础条件渲染
通过双与控制单个元素的显示与隐藏
三元运算符：两个元素
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/c0b98315-6114-4c19-aea5-2cf7d29a0d70.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/1c422ffa-78b2-4132-b72b-747c4bf2121a.png)
## 五：实现复杂条件渲染
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/0d4504b5-23e9-468d-9a12-a79fc872d654.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/5bcf4a4b-e180-4d04-bb2e-de839d54915b.png)
## 六：事件绑定
####  1.基础绑定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/53e3db66-584e-4425-9b4b-b3ecbb25a46f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/1dcbf94d-c51d-4ae2-89e3-c1b20ce76010.png)
####  2.事件参数e
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/241639b8-df96-4ec6-91b0-a4e905e0b002.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/075462c5-06bc-4643-93ed-e444ace4b32f.png)
####  3.传递自定义参数
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/d5124069-3887-4ac3-acee-db23e3bc87de.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/feb6f842-d34c-4ee0-a9c9-72589160f1fd.png)
####  4.既要传递自定义参数，而且还要事件对象e
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/55078340-3123-48da-8190-aea037461a02.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/aa447d2a-83fc-4c5c-bb86-975fac42144d.png)
## 七：组件基础使用
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/f2c7e37c-cff5-414f-9e76-f7c9c15e4ffc.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/c4d91184-d149-4b05-a2b5-808ce071b9cd.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/84a56061-d318-4c7b-8e08-ce98cbd0bcba.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/7306589d-7b07-4396-84b4-fbd1b56ba38e.png)
## 八：useState基础使用
😊useState是用来给组件添加状态变量的
状态变量(count)会引起视图的变化,状态变量是多少，视图就是多少
方法的使用：导入--执行--返回数组（状态变量，修改方法）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/930bdc8c-6cff-46c7-b16f-2666577ab17f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/4db6b0a5-fe05-4380-99b8-363ebaceef93.png)
## 九：useState修改状态的规则
使用新值替换老值，使用新对象替换老对象
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/83eff4a0-3a0b-41ab-9325-a33d823f3990.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/30bb6957-5050-4e66-9593-d8065112d5f7.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/51aaf003-1987-45e1-84e9-46ff01cb4a87.png)
## 十：基础样式控制
className √ class ×
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/9e232a10-d23d-49a6-b46a-7905bb2c7a15.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/89862322-9b43-4907-b8f4-aba37105c97c.png)