当前位置：首页 > article >正文

React 元素渲染

article 2025/3/1 9:23:07

React 元素渲染

React 是一个用于构建用户界面的 JavaScript 库，它允许开发人员创建大型应用程序，这些应用程序可以随着时间的推移而高效地更新和渲染。React 的核心概念之一是元素渲染，它描述了如何将 JavaScript 对象转换为 DOM（文档对象模型）元素。

什么是 React 元素？

React 元素是 React 应用程序中最小的构建块。它是一个描述屏幕上应显示内容的普通 JavaScript 对象。React 元素不同于 DOM 元素，因为它们不会直接在浏览器中渲染。相反，它们被 React 使用来构建 DOM 并保持其更新。

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

在上面的例子中，element 是一个 React 元素，它表示一个 h1 标签，其中包含文本“Hello, world!”。

渲染 React 元素

要将 React 元素渲染到 DOM 中，需要使用 ReactDOM.render() 方法。这个方法接受两个参数：要渲染的 React 元素和 DOM 中的目标节点。

import ReactDOM from 'react-dom';

const element = <h1>Hello, world!</h1>;
ReactDOM.render(element, document.getElementById('root'));

在这个例子中，ReactDOM.render() 将 element 渲染到 ID 为 root 的 DOM 节点中。

更新已渲染的元素

React 元素是不可变的。一旦创建，就不能更改其子元素或属性。要更新 UI，需要创建一个新的 React 元素，并将其传递给 ReactDOM.render()。

import ReactDOM from 'react-dom';

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

setInterval(tick, 1000);

在这个例子中，tick 函数每秒创建一个新的 React 元素，并使用 ReactDOM.render() 更新 DOM。

React 组件

React 组件是返回 React 元素的函数或类。它们允许你将 UI 分割成独立可复用的部分，并独立管理每个部分的状态。

import ReactDOM from 'react-dom';

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sarah" />;
ReactDOM.render(element, document.getElementById('root'));

在这个例子中，Welcome 是一个组件，它接受一个 name 属性并返回一个包含该名字的 h1 标签的 React 元素。