react中jsx和组件基础

关于虚拟DOM

1.本质是object类型的对象

2.虚拟DOM比较轻，真实DOM比较重，因为虚拟DOM是react内部在用，无需真实DOM上那么多得属性

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

jsx语法规则

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

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

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

4.内联样式，要用style={{key：value}}得形式写

5.只有一个根标签 （用一个div标签包裹所有）

6.标签必须闭合

7.标签首字母

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

（2）若大写字母开头，react就去渲染对应得组件，若组件没有定义，则报错

区分 “js语句（代码）” 与 “js表达式”

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

（1）a

（2）a+b

（3）demo（1）

（4）arr.map（）

(5)function test(){}

2.语句（代码）

（1）if() {}

(2) for() {}

(3) switch() {case:      }

模块与组件的理解

 

 

函数式组件

 执行了渲染后，发生了

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

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

类式组件

类的基本知识

1.类的构造器不是必须要写的，要对实例进行一些初始化操作 ，如添加指定属性时才写

2.如果a类继承了b类，且a类中写了构造器，则a类构造器中必须写super

3.类中所定义的方法，都是放在类的原型对象上，供实例去使用

简单组件与复杂组件

如果组件是有状态的，则为复杂组件

如果组件没有状态的，则为简单组件

组件的状态state驱动页面

组件实例的三大核心属性

1state

2props

3ref