React-中的虚拟-DOM-以及-render-函数

虚拟 DOM

Virtual DOM 是 React 提供的一种编程概念和技术, 它通过在内存中创建一个轻量级的 DOM 表示, 来实现高效的 UI 更新和渲染, 目的是提升性能并简化开发者的操作.

Virtual DOM 本质上是以 JavaScript 对象形式存在的树结构, 它表示了实际 DOM 树的状态. 每当组件的状态 (state) 或属性 (props) 发生变化时, React 会创建一个新的虚拟 DOM 树, 然后将其与之前的虚拟 DOM 树进行比较 (称为 “协调” 或 “调和”, Reconciliation, 找出差异 (称为 “diff”), 最后只更新那些实际需要更改的 DOM 元素.

工作流程

什么时候创建?

当 React 组件初始化或更新时, React 根据组件的 JSX 结构创建一个虚拟 DOM 树.

什么时候比较更新

当组件的状态或属性变化时, React 会重新渲染组件, 生成新的虚拟 DOM 树. 然后, React 会将新的虚拟 DOM 树与旧的虚拟 DOM 树进行比较, 找出差异并更新.

render 函数

在 React 中, render 函数的主要作用是返回一个描述组件 UI 结构的 JSX 元素. 这些元素会被 React 转换成虚拟 DOM (Virtual DOM), 然后再由 React 进行协调 (Reconciliation), 最终映射到实际的 DOM 中.

如:

import Image from './Image.js';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'))
root.render(<Image />);

每一个 React 应用都必须有一个根节点 (root node), 这是 React 应用的挂载点. 根节点是一个普通的 DOM 元素, React 在这个元素上构建和管理自己的虚拟 DOM 树, 并最终映射到实际的 DOM 中.

通常根节点只有一个, 但如果需要展示多个独立的 React 应用, 每个应用可以由自己的根节点.