React - 01

虚拟DOM：

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

2.虚拟DOM比较“轻”，真实DOM比较“重”

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

jsx语法规则：

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

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

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

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

5.虚拟DOM只有一个根标签

6.标签必须闭合（单标签要加结束标签或者加/）

7.标签首字母：

（1）若小写字母开头，则将该标签转为html中的同名元素，若没有，则报错

（2）若大写字母开头，React就去渲染对应的组件，若组件未定义，则报错

注意区分【js语句（代码）】与【js表达式】：

1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方

2.语句（代码）：如if语句、for语句、switch语句等

执行了ReactDOM.render(<MyComponent />......之后，发生了什么？

函数式组件（简单组件）：

1.React解析组件标签，找到了MyComponent组件

2.发现组件是函数定义的，随后调用该函数，将返回的虚拟DOM转化为真实DOM，随后呈现在页面中

类式组件（复杂组件）：

1.React解析组件标签，找到了MyComponent组件

2.发现组件是类定义的，随后new出来该类的实例，并通过该实例调用原型上的render方法

3.将render返回的虚拟DOM转化为真实DOM，随后呈现在页面中

一、组件实例的三大核心属性

1.state

状态state不可直接更改，需要借助一个内置的API去更改，即setState

setState更新状态是一种合并，不是覆盖整个state

1. 构造器constructor调用一次

2. render调用1+n次，1是初始化那次，n是状态更新的次数