web前端高级React - React从入门到进阶之JSX虚拟DOM渲染为真实DOM的原理和步骤

系列文章目录

第一章：React从入门到进阶之初识React
第二章：React从入门到进阶之JSX简介
第三章：React从入门到进阶之元素渲染
第四章：React从入门到进阶之JSX虚拟DOM渲染为真实DOM的原理和步骤
第五章：React从入门到进阶之组件化开发及Props属性传值
第六章：React从入门到进阶之state及组件的生命周期
第七章：React从入门到进阶之React事件处理

一、分析与思考

前面我们已经学习了JSX的一些基本语法，通过前面的学习我们知道：在js文件中通过调用ReactDOM.render()方法，并传入一堆JSX代码（可以理解为虚拟DOM）。当程序运行时这些JSX代码就会被转换为真实的DOM元素然后呈现在页面上；那么这些JSX虚拟DOM是如何被转换为真实DOM的呢，原理又是怎样的呢？

当我们用react脚手架创建好一个项目后，会生成一个package.json文件，在这个文件的最下面有这样一段代码

"babel" :{
    
		presets:["react-app"] 
}

了解babel的人应该都知道，babel主要是用来将ES6或更高版本的js代码转换为ES5的代码，从而提高兼容性。上面这段代码的配置同样也是如此，它可以将JSX虚拟DOM转换成React可识别的React DOM对象，如下图：

二、JSX虚拟DOM渲染为真实DOM的原理和步骤

接下来我们就来分析一下JSX虚拟DOM渲染为真实DOM的原理和步骤

• 基于babel-preset-react-app把JSX语法变为React.createElement的模式
  • 只要遇到元素标签（或组件）都要调用createElement
  • createElement的前两个参数是固定的：标签名（组件名）、属性，第三个及以后的参数是子元素
  • 如果传递了属性，第二个参数是一个对象（包含了各属性的信息），没有传递属性则第二个参数为null
• 基于React.createElement方法执行创建出虚拟DOM对象（JSX对象）
  • 首先创建一个对象
  • type属性存储的是标签名或组件
  • props属性：如果没有传递任何属性，也没有任何子元素，则为空对象；把传递的createElement的属性，都赋值给props；如果有子元素则新增一个children属性，可能是一个值也可能是一个数组
• 基于ReactDOM.render把创建的虚拟DOM对象渲染到页面指定的容器中
  • ReactDOM.render([jsxObj],[container],[callback])，render接收三个参数：jsx对象，页面指定的容器和回调函数（可不传）
  • callback渲染触发的回调函数，着这里可以获取到真实DOM

三、基于渲染原理重写createElement和render