在 React 中,元素是构建用户界面的最小单位。元素是不可变的,一旦创建就无法修改其内容或属性。React 的核心概念之一就是将元素渲染到 DOM 中。
创建元素
要创建一个 React 元素,可以使用 React.createElement()
方法。这个方法接受三个参数:元素类型、元素属性和子元素。
----- ------- - ------------------------- - ---------- ------- -- ------- ---------
上面的代码将创建一个 <h1>
元素,具有 className
属性为 title
,并且其文本内容为 Hello, World!
。
渲染元素
要将元素渲染到页面上,需要使用 ReactDOM.render()
方法。这个方法接受两个参数:要渲染的元素和要渲染到的 DOM 节点。
------------------------ ---------------------------------
上面的代码将创建的 element
元素渲染到页面上的 root
节点中。
更新元素
在 React 中,元素是不可变的。如果要更新页面上的元素,需要创建一个新的元素并重新渲染到页面上。
----- ---------- - ------------------------- - ---------- ------- -- ------- --------- --------------------------- ---------------------------------
上面的代码将创建一个新的 <h1>
元素,文本内容为 Hello, React!
,并将其渲染到页面上,替换之前的元素。
这就是 React 元素渲染的基本概念,下一节将介绍如何使用组件来构建更复杂的界面。