React 也就这么回事 04 —— 元素渲染

liuian 2025-03-07 20:52 33 浏览

为了便于后续理解，我们再来回顾和总结前面几个章节的内容

1 元素及其创建

元素是构成 React 应用的最小砖块。

元素描述了你在屏幕上想看到的内容。

const element = Hello, world;

与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。

我们用 React.createElement来创建 React 元素（语法上还可以使用其语法糖 JSX）

2 将一个元素渲染为DOM

想要将一个 React 元素渲染到指定的 DOM 节点中，只需把它们一起传入 ReactDOM.render()：

const element = Hello, world;
ReactDOM.render(element, document.getElementById('root'));

3 更新UI

React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。

根据我们已有的知识，更新 UI 唯一的方式是创建一个全新的元素，并将其传入 ReactDOM.render()。

考虑一个计时器的例子：

function tick() {
  const element = (
    
      Hello, world!
      It is {new Date().toLocaleTimeString()}.
    
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

这个例子会在 setInterval() 回调函数，每秒都调用 ReactDOM.render()。

4 React 只更新它需要更新的部分

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

例如前面计时器的例子，尽管每一秒我们都会新建一个描述整个 UI 树的元素，React DOM 只会更新实际改变了的内容，也就是例子中的文本节点。

The End

element-react

上一篇：Java基础知识总结(超详细整理)
下一篇：React 1、JSX使用教程

React 也就这么回事 04 —— 元素渲染

1 元素及其创建

Hello, world

2 将一个元素渲染为DOM

Hello, world

3 更新UI

Hello, world!

It is {new Date().toLocaleTimeString()}.

4 React 只更新它需要更新的部分

相关推荐

飞牛OS入门安装遇到问题，如何解决?

如何在 iPhone 和 Android 上恢复已删除的抖音消息

Boost高性能并发无锁队列指南:boost::lockfree::queue

大模型手册: 保姆级用CherryStudio知识库

用什么工具在Win中查看8G大的log文件?

如何在 Windows 10 或 11 上通过命令行安装 Node.js 和 NPM

威联通NAS安装阿里云盘WebDAV服务并添加到Infuse

Trae IDE 如何与 GitHub 无缝对接?

idea插件之maven search(工欲善其事，必先利其器)

如何修改图片拍摄日期?快速修改图片拍摄日期的6种方法