一、一个最简单的react 页面:
ReactDOM.render(
Hello, world!
,
document.getElementById('root')
);
它将在页面上展示一个 “Hello, world!” 的标题。
react简单的一个Hello, world看着貌似很复杂,后面将会逐步
二、何为DOM元素?
首先上段helloworld中用到了一个ReactDOM,那么react中dom是什么意思呢?
在网页中,每个HTML标签都可以看作是一个DOM元素,比如
、
、
React DOM是React提供的一个用于操作DOM的库。它可以将React元素(React Element)渲染为实际的DOM元素,并提供了一系列操作DOM元素的API。React DOM使得操作DOM变得更加高效和简单,并且可以提高应用程序的性能。
三、虚拟DOM
在React中,渲染DOM元素的过程是非常耗费性能的。因此,React采用了虚拟DOM(Virtual DOM)的机制来提高性能。
虚拟DOM是React使用的一种JavaScript对象,它是对实际DOM的一种抽象表示。React将组件的虚拟DOM与实际DOM进行比较,然后只更新需要改变的部分,这样可以减少不必要的DOM操作,提高应用程序的性能。
举个例子,假设我们有一个按钮,点击按钮后需要修改一个文本框的内容。在传统的页面中,需要通过JavaScript找到这个文本框,然后修改它的内容。但在React中,我们可以通过修改组件的状态,然后生成一个新的虚拟DOM对象来实现这个功能。React会将新的虚拟DOM对象与旧的虚拟DOM对象进行比较,然后只更新需要改变的部分,这样就避免了不必要的DOM操作,提高了性能。
因此,虚拟DOM是React中的一种重要机制,它可以提高应用程序的性能,使得开发更加高效和简单。
四、React中的元素
元素是构成 React 应用的最小砖块。它描述了你在屏幕上想看到的内容。
React元素(React Element)是React中的一个概念,它是一个JavaScript对象。React元素描述了UI的一部分,可以是HTML元素、组件、或者其他用户自定义元素。React元素是虚拟的,开发者可以通过React DOM将其渲染为实际的DOM元素。
因此,React DOM和React元素是密切相关的概念。React元素描述了UI的一部分,React DOM则负责将其渲染为实际的DOM元素。
在React应用中,开发者通过创建和组合React元素来构建UI。React元素可以嵌套,并且可以包含其他React元素。React元素的创建方式类似于HTML标签,那我们再解析下最初的那段代码
//将元素渲染成Dom
ReactDOM.render(
//元素
Hello, world!
,
//将其插入到页面中ID为root的元素中。
document.getElementById('root')
);
其中
Hello, World!
就是一个React元素,它描述了一个h1标签,并包含了“Hello, World!”文本。这个元素可以通过React DOM渲染为实际的h1标签元素。
至于后面为什么要插入到root元素中是因为在使用ReactDOM.render()方法将React元素渲染为实际的DOM元素时,必须指定将渲染后的DOM元素插入到页面的哪个位置。因此,使用document.getElementById()方法获取DOM元素是必要的。
如果我们不指定要插入到哪个位置,那么渲染后的DOM元素就不会显示在页面上。
五、总结:
本章介绍了react的dom、元素相关概念,react中元素和组件是最容易混淆的,我们会在接下来的文章中介绍组件。组件是由元素构成的,也是react中最重要的模型/概念
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
1.背景 2020年以来内容标注结果搜索就是社区中后台业务的核心高频使用场景之一,为了支撑复杂的后台搜索,我们将社区内容的关键信息额外存了一份到Elasticsearch中作为二级索引使用。随着标注业务的细分、迭代和时间的推移,这个索引的文档数和搜索的RT开始…