Bootstrap

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是状态更新的次数

;