React学习笔记（一）DOM、元素

一、一个最简单的react 页面：

ReactDOM.render(
  
Hello, world!
,
  document.getElementById('root')
);

它将在页面上展示一个 “Hello, world!” 的标题。

react简单的一个Hello, world看着貌似很复杂，后面将会逐步

二、何为DOM元素?

        首先上段helloworld中用到了一个ReactDOM，那么react中dom是什么意思呢？

        在网页中，每个HTML标签都可以看作是一个DOM元素，比如

、

、

等。这些DOM元素可以通过JavaScript来操作，例如修改文本内容、改变样式等等。

        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中最重要的模型/概念