React基础-JSX的本质-虚拟DOM的创建过程实例分析
JSX的本质
实际上，jsx仅仅只是 React.createElement(component, props, ...children) 这个函数的语法糖。
所有的jsx最终都会被转换成React.createElement的函数调用。
createElement需要传递三个参数:
参数一:type
当前元素的类型;
如果是标签元素，那么就使用字符串表示, 例如 “div”;
如果是组件元素，那么就直接使用组件的名称;
参数二:config
所有jsx中的属性都在config中以对象的属性和值的形式存储;
比如传入className作为元素的class;
参数三:children
存放在标签中的内容，以children数组的方式进行存储;
当然，如果是多个元素呢?React内部有对它们进行处理，处理的源码在下方
我们知道默认jsx是通过babel帮我们进行语法转换的，所以我们之前写的jsx代码都需要依赖babel; 我们可以在babel的官网中快速查看转换的过程: 链接: https://babeljs.io/repl/#?presets=react
例如有下面这样一段jsx代码
class App extends React.Component {
constructor() {
super()
}
render() {
return (
<div>
<div className="header">Header</div>
<div className="content">
<div>Banner</div>
<ul>
<li>轮播图1</li>
<li>轮播图2</li>
<li>轮播图3</li>
<li>轮播图4</li>
<li>轮播图5</li>
</ul>
</div>
<div className="footer">Footer</div>
</div>
)
}
}
const app = ReactDOM.createRoot(document.querySelector("#app"))
app.render(<App/>)
那么也就是说我们可以自己来编写React.createElement代码:
我们没有通过jsx来书写了，界面依然是可以正常的渲染。
另外，在我们编写原生的React情况下，我们就不需要babel相关的内容了(当然真实开发中我们是不会编写原生的React的)
- 所以，type="text/babel"可以被我们删除掉了;
- 所以，
<script src="../react/babel.min.js"></script>也可以被我们删除掉了;
<div></div>
<script src="../lib/../lib/react.js"></script>
<script src="../lib/react-dom.js"></script>
<script>
class App extends React.Component {
constructor() {
super()
}
render() {
const element = React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
className: "header"
}, "Header"), /*#__PURE__*/React.createElement("div", {
className: "content"
}, /*#__PURE__*/React.createElement("div", null, "Banner"), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, "\u8F6E\u64AD\u56FE1"), /*#__PURE__*/React.createElement("li", null, "\u8F6E\u64AD\u56FE2"), /*#__PURE__*/React.createElement("li", null, "\u8F6E\u64AD\u56FE3"), /*#__PURE__*/React.createElement("li", null, "\u8F6E\u64AD\u56FE4"), /*#__PURE__*/React.createElement("li", null, "\u8F6E\u64AD\u56FE5"))), /*#__PURE__*/React.createElement("div", {
className: "footer"
}, "Footer"));
return element
}
}
const app = ReactDOM.createRoot(document.querySelector("#app"))
app.render(React.createElement(App, null))
</script>
虚拟DOM的创建过程
我们通过 React.createElement 最终创建出来一个 ReactElement对象:
这个ReactElement对象是什么作用呢?React为什么要创建它呢?
原因是React利用ReactElement对象组成了一个JavaScript的对象树;
JavaScript的对象树就是虚拟DOM(Virtual DOM);
如何查看ReactElement的树结构呢?
我们可以将上面代码中的jsx返回结果进行打印;
**而ReactElement最终形成的树结构就是虚拟DOM (Virtual DOM) **;
虚拟DOM帮助我们从命令式编程转到了声明式编程的模式
React官方的说法:Virtual DOM 是一种编程理念。
在这个理念中，UI以一种理想化或者说虚拟化的方式保存在内存中，并且它是一个相对简单的JavaScript对象
我们可以通过
root.render让 虚拟DOM 和 真实DOM同步起来，这个过程中叫做协调(Reconciliation);
这种编程的方式赋予了React声明式的API:
你只需要告诉React希望让UI是什么状态;
React来确保DOM和这些状态是匹配的;
你不需要直接进行DOM操作，就可以从手动更改DOM、属性操作、事件处理中解放出来;
PS：笔者在进行相关测试或开发的时候比较喜欢实用vite搭建vue或react的运行环境，使用命令 npm init vite@latest 创建基本的项目框架，再进行相关调试。
理解虚拟DOM有助于我们更加深入的理解react、vue等框架的运行原理。
相关文章
登录、注册、找回密码是前端项目经常遇到的需求,本文主要介绍了React实现简单登录的项目实践,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
使用React+SpringBoot开发一个协同编辑的表格文档实现步骤
随着云计算和团队协作的兴起,协同编辑成为了许多企业和组织中必不可少的需求,本文小编就将为大家介绍如何使用React+SpringBoot简单的开发一个协同编辑的表格文档,感兴趣的朋友一起看看吧2023-11-11
在React中,通过自定义Hook useTimeHook实现定时器的启动与清除,在App组件中使用Clock组件展示当前时间,利用useEffect钩子在组件挂载时启动定时器,同时确保组件卸载时清除定时器,避免内存泄露,这种方式简化了状态管理和副作用的处理2024-10-10
本篇文章主要介绍了webpack3+React 的配置全解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要介绍了react使用CSS实现react动画功能,结合实例形式分析了react使用CSS实现react动画功能具体步骤与实现方法,需要的朋友可以参考下2020-05-05
本文主要介绍了使用react完成点击返回顶部操作，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
react中的useImperativeHandle()和forwardRef()用法
这篇文章主要介绍了react中的useImperativeHandle()和forwardRef()用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
使用webpack5从0到1搭建一个react项目的实现步骤
这篇文章主要介绍了使用webpack5从0到1搭建一个react项目的实现步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
本篇文章主要介绍了react-native fetch的具体使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要为大家介绍了React手写一个手风琴组件示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
最新评论