React飞行日记(三) - JSX语法的渲染流程

Jsx的渲染流程

在React.js中, 其为我们提供了一种JSX语法, 能够直接在JS文件中进行虚拟DOM代码的编写, 并在编译后转换成真实DOM渲染到页面中, 那么React是怎么把JSX的虚拟DOM转换成真实的DOM?

主要靠两个API : React.createElement | ReactDOM.render

实验代码

显示效果

渲染步骤

1. 需要借助babel来帮我们编译JSX语法的代码

   babel网址
   用法如下↓↓↓↓↓↓↓↓
   

2. jsx语法转换成编译后, <div></div>就变成了React.createElement(...)这样的结构

   

   执行React.createElement(...)会返回一个对象, 我称他为 抽象DOM对象 该对象如下

   

   // 被返回的对象
   {
     	type: 'div',
       key: null,
   		ref: null,
       props: {id: 'onde', style: {color: "red"}, childre:[{..},{..}]},
       __proto__: Object
       ...
   }
   

3. 执行React.render方法 ( 第五篇会重写render方法 )

   1. 会把React.createElement() 生成的对虚拟DOM对象作为第一参数
   2. 并渲染到到传入的第二个参数容器中( 第二参数是容器 )
   3. 最后执行第三个回调函数