React 元素渲染学习笔记

什么是 React 元素渲染？

在 React 中，元素是构建 React 应用的最小单位。元素以类似 HTML 标签的方式描述 UI 组件的结构和呈现形式。React 使用 ReactDOM 渲染库将 React 元素转换为可视化 UI。

React 元素通常是不可变的。一旦创建，您无法更改其子节点或属性。相反，您需要创建新的元素来更新 UI。

如何渲染 React 元素？

要将 React 元素渲染到 DOM 中，您需要使用 ReactDOM.render() 方法。

下面是一个简单示例，它将 “Hello, world!” 文本渲染到一个 div 元素中：

javascriptCopy Code
import React from 'react';
import ReactDOM from 'react-dom';

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

该示例首先导入了 React 和 ReactDOM 库。然后，它定义了一个名为 element 的 React 元素，并将其传递给 ReactDOM.render() 方法以在页面上渲染。

要注意的是，ReactDOM.render() 方法需要两个参数：要渲染的元素和 DOM 元素，它将渲染结果附加到该元素中。

渲染简单的 React 组件

除了渲染文本元素，React 还允许您渲染自定义组件。要渲染自定义组件，您只需要像渲染标准元素一样引用它们即可。

下面是一个简单的示例，它将渲染一个自定义的 Welcome 组件：

javascriptCopy Code
import React from 'react';
import ReactDOM from 'react-dom';

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

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

这个例子定义了一个名为 Welcome 的函数组件。它接受一个 props 对象作为输入，它包含要呈现的名称。在此示例中，我们将名称设置为“Alice”。

然后，该示例创建了一个名为 element 的 React 元素，它使用了这个自定义组件，并将“名称”设置为“Alice”。

最后，该示例将该元素传递给 ReactDOM.render() 方法，以将其渲染到页面上。

总结

React 元素是构建 React 应用的最小单位，您可以使用 ReactDOM 渲染库将其渲染到页面上。您可以渲染标准文本元素，也可以渲染自定义组件。每次更新 UI 时，您需要创建新的元素来反映这些更改。

以上就是React 元素渲染学习笔记的内容和示例。感谢您的阅读！