React 元素渲染

在 React 中，元素是构建用户界面的最小单位。元素是不可变的，一旦创建就无法修改其内容或属性。React 的核心概念之一就是将元素渲染到 DOM 中。

创建元素

要创建一个 React 元素，可以使用 React.createElement() 方法。这个方法接受三个参数：元素类型、元素属性和子元素。

const element = React.createElement('h1', { className: 'title' }, 'Hello, World!');

上面的代码将创建一个 <h1> 元素，具有 className 属性为 title，并且其文本内容为 Hello, World!。

渲染元素

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

ReactDOM.render(element, document.getElementById('root'));

上面的代码将创建的 element 元素渲染到页面上的 root 节点中。

更新元素

在 React 中，元素是不可变的。如果要更新页面上的元素，需要创建一个新的元素并重新渲染到页面上。

const newElement = React.createElement('h1', { className: 'title' }, 'Hello, React!');
ReactDOM.render(newElement, document.getElementById('root'));

上面的代码将创建一个新的 <h1> 元素，文本内容为 Hello, React!，并将其渲染到页面上，替换之前的元素。

这就是 React 元素渲染的基本概念，下一节将介绍如何使用组件来构建更复杂的界面。