第三节：React元素渲染

React元素渲染

元素是构成React应用的最小单位，用于描述屏幕上的输出内容

const element = <h1>Hello world!</h1>

与浏览器的DOM元素不同，React当中的元素事实上就是javascript的普通的对象，React DOM可以确保浏览器DOM的数据内容与React元素保持一致。

元素和React组件的关系
React元素就是一个简单的JavaScript对象。和界面的一部分DOM对应。描述这部分DOM的结构和渲染效果。
React组件是由元素组成的。最核心的作用就是返回React元素。React组件负责调用React.createElement()，生成并返回React元素。供React内部将其渲染成最终的页面DOM。
下一章节，我们就来了解什么是React组件

如何将一个元素渲染成DOM？

假设你的HTML文件某处有个<div>:

<div id='root'></div>

这里将其称之为根DOM节点、因为这个节点的所有内容都将由React DOM管理。

接下来，我们就将一个React元素渲染到根DOM节点上，通过ReactDOM.createRoot()

const root = ReactDOM.createRoot(
	document.getElementById('root');
)

const element = <h1>Hello World</h1>
root.render(element);

页面上会展示"Hello World！"

如何更新已渲染的元素？

React元素是不可变对象。一旦被创建，就无法更改他的子元素或者属性。
目前这三章节学习，那么更新UI唯一的方式是创建一个全新的元素，并将其传入root.render()

// 官网的循环定时器更新ui
const root = ReactDOM.createRoot(
  document.getElementById('root')
);

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  root.render(element);
}

setInterval(tick, 1000);

在实际应用中，大多数React应用只会调用一次root.render(),后面，将学习如何将代码封装到有状态组件中

React只会更新被修改的部分

React DOM会将元素和它的子元素与他们之前的状态进行比较，并只会进行必要的更新来使DOM达到预期的状态。

本章节，没有特别多要总结的地方，我会在后面章节，专门对React如何实现DOM动态更新的原理。感谢关注。