React组件 -- 渲染过程

react组件

react中创建组件有两种方式：

1.函数声明式组件
    原理: 返回固定的JSX语法
    特点: 静态不可改变
2.基于继承COMPONENT类来创建组件

函数声明式组件

函数式声明组件返回一个新的JSX(也就是当前组件的JSX结果);

函数式组件渲染过程

CreateElement在处理JSX语法的时候,,遇到一个组件,返回的对象中: Type就不是字符串标签名了,而是一个函数(类),但是属性还是存在PROPS中.

1、基于babel-paeset-react转义

2、基于React.createElement()创建的虚拟DOM,遇到组件,type是一个函数或者是一个类.

3、render渲染的时候,

》 我们需要做处理，
    首先判断TYPE的类型，如果是字符串，就创建一个标签，
    如果函数或者类，就把函数执行，把PROPS中的每一项（包含children）传递给函数
》 在执行函数的时候，把函数中terurn的JSX转换为新的对象（通过CREATE-ELEMENT），把这个对象返回
》 紧接着RENDER按照以往的渲染方式，创建DOM元素，插入到指定的容器中即可

基于继承COMPONENT类来创建组件

渲染过程

1、基于babel-paeset-react转义

2、基于React.createElement()创建的虚拟DOM,遇到组件,type是一个函数或者是一个类.

3.render函数执行.

---

细节之处,略有疏漏,如有不足或者错误的地方,欢迎大佬批评并加以指正.谢谢.