1.hello react 

1. React提供了一些API来创建一种 “特别” 的一般js对象
   1. 1. const VDOM = React.createElement(\'xx\',{id:\'xx\'},\'xx\')
      2. 上面创建的就是一个简单的虚拟DOM对象
2. 虚拟DOM对象最终都会被React转换为真实的DOM
3. 我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界。

 2.虚拟DOM的两种创建方式

jsx创建

js创建

对比

1.本质是Object类型的对象（一般对象）

2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。

3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上。

3.jsx语法规则

jsx语法规则：

                        1.定义虚拟DOM时，不要写引号。

                        2.标签中混入JS表达式时要用{}。

                        3.样式的类名指定不要用class，要用className。

                        4.内联样式，要用style={{key:value}}的形式去写。

                        5.只有一个根标签

                        6.标签必须闭合

                        7.标签首字母

                                (1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对                                  应的同名元素，则报错。

                                (2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

4.组件模块化

1.函数式组件

2.类式组件

类中的方法会添加到原型上，

继承，子类原型对象指向父类实例，并添加方法，和constructor函数(指向子类class)，

该父类实例原型指向父类class

渲染类组件标签的基本流程

1. React内部会创建组件实例对象
2. 调用render()得到虚拟DOM, 并解析为真实DOM
3. 插入到指定的页面元素内部

5. 组件三大核心属性1: state 

类似于vue-data

 理解

1. state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
2. 组件被称为\"状态机\", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

强烈注意

1. 组件中render方法中的this为组件实例对象
2. 组件自定义的方法中this为undefined，如何解决？
   1. 强制绑定this: 通过函数对象的bind()
   2. 箭头函数
3. 状态数据，不能直接修改或更新

6.组件三大核心属性2: props

类似于vue-props。向组件传值。只读。

理解

1. 每个组件对象都会有props(properties的简写)属性
2. 组件标签的所有属性都保存在props中

作用

1. 通过标签属性从组件外向组件内传递变化的数据
2. 注意: 组件内部不要修改props数据

 基本使用

对props进行限制

复习

        class Test{
            name=\'jack\'
            a = 1//添加到实例
            static age = 18//添加到类本身
        }
        console.log(\'----\',Test)
        let t = new Test()
        console.log(\'t\',t)
        console.log(\'-----\',Test.a)//undefined
        console.log(\'-----\',Test.age)//18
        console.log(\'-----\',t.age)//undefined

props简写 

​​​​​​​

构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props

 函数式组件使用props

7.组件三大核心属性3: refs与事件处理

作用类似于vue中ref

理解

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

编码

事件处理

1. 通过onXxx属性指定事件处理函数(注意大小写)
   1. React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
   2. React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
2. 通过event.target得到发生事件的DOM元素对象

 字符串形式的ref

dom节点挂载到组件实例的refs属性上

回调函数形式的ref

dom节点挂载到组件实例本身上

回调ref中回调执行次数的问题

createRef的使用

把dom节点存储进React.createRef()后的属性里