系列文章目录
第一章: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