人为什么要学react因为它和佐助的万花筒长得很像（大雾）。

---

参考网络教程为尚硅谷React教程（2022加更，B站超火react教程）

---

虚拟DOM

JSX语法规则

JSX语法规则：

1. 定义虚拟DOM时，不要写引号
2. 标签中混入JS表达式时要用{}
3. 样式的类名指定不要用class要用className
4. 内联样式，要用style={{key:value}}的形式写
5. 只有一个根标签
6. 标签必须闭合
7. 标签首字母：i. 若小写字母开头，则将该标签转为html中同名元素，若html无该标签对应的同名元素，则报错。ii.若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

JSX小练习

注意区分【JS语句/代码】与【JS表达式】表达式会产生一个值，可以放在任何一个需要值的地方。下面都是JS表达式：

1. a
2. a+b
3. demo(1)
4. arr.map()
5. function test () {}

下面都是语句/代码：

1. if () {}
2. for () {}
3. switch () {}

类中方法的this

严格模式开启与否，对应window与undefined。

通过实例调用与直接调用是不同的。

类中的方法默认开启了局部的严格模式，所以方法中的this为undefined

因此要在构造器里写this.方法 = this.方法.bind(this) 重新指向自身。

setState的使用

状态（state）不可直接更改，必须通过setState设置

且这种设置是合并操作，只更新同名属性状态，其余沿用原来的

state的简写

在类里仅初始化状态，再用赋值语句+箭头函数自定义方法

方法名 = () = >{}

---