Inside Ynsjx 元素渲染 创建一个简单的ICMTC 组件
React 18 中的元素渲染
React 18 引了 React DOM 的渲染方式，引入了新的并发特性。以下是一个详细的示例和解释，展示如何在 React 18 中渲染元素。
创建一个简单的 React 组件
import React from 'react';
import ReactDOM from 'react-dom/client';
// 创建一个简单的 React 组件
function App() {
return <h1>Hello, React 18!</h1>;
}
// 获取 id 为 "example" 的 DOM 容器，并创建一个 React 根节点
const root = ReactDOM.createRoot(document.getElementById('example'));
// 渲染 React 组件到 DOM 中的根节点
root.render(<App />);
元素渲染
React 元素是构建 React 应用的最小单元，它描述了你希望在屏幕上看到的内容。React 元素是不可变对象，一旦创建就不能更改。
const element = <h1>Hello, world!</h1>;
与浏览器的 DOM 元素不同，React 中的元素事实上是普通的对象，React DOM 会确保浏览器 DOM 的数据内容与 React 元素保持一致。
// 将元素渲染到 DOM 中的根节点
root.render(element);
更新元素渲染
React 元素都是不可变的。当元素被创建之后，你是无法改变其内容或属性的。
当你需要更新界面时，唯一的办法是创建一个新的元素，然后将其传入 ReactDOM.render() 方法：
const root = ReactDOM.createRoot(document.getElementById('example'));
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>现在是 {new Date().toLocaleTimeString()}.</h2>
</div>
);
root.render(element);
}
setInterval(tick, 1000);
以上示例通过 setInterval() 方法，每秒钟调用一次 ReactDOM.render()。
使用函数组件
你还可以创建一个 React.Component 的 ES6 类，该类封装了要展示的元素。需要注意的是，在 render() 方法中，需要使用 this.props 替换 props：
class Clock extends React.Component {
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>现在是 {this.props.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
function tick() {
const root = ReactDOM.createRoot(document.getElementById('example'));
root.render(
<Clock date={new Date()} />
);
}
setInterval(tick, 1);
并发渲染
在 React 18 中，渲染过程被拆分为两个阶段：
-
渲染阶段：在渲染阶段中，React 会创建一个新的 React 元素树，并对比之前的树以确定哪些部分需要更新。
-
提交阶段：在提交阶段中， ReactDOM 会将新的 React 元素树渲染到 DOM 中。
默认情况下，渲染和提交是同步进行的。但是，当应用变得复杂时，这可能会导致用户体验的下降。为了解决这个问题，React 18 引入了并发渲染特性。
当并发渲染启用时，渲染和提交会分开执行。渲染会在后台线程上异步执行，而提交会在主线程上同步执行。这允许 React 在渲染元素树时不阻塞用户界面，从而提高了应用的响应性。
要启用并发渲染，你需要在创建 React 根节点时传入 suspense 选项：
const root = ReactDOM.createRoot(document.getElementById('example'), { suspense: true });
总结
在 React 18 中，元素渲染与之前的版本有了一些变化，特别是在使用 ReactDOM.createRoot 和新的并发特性方面。以下是一个总结：
- 创建一个简单的 React 组件。
- 获取 id 为 "example" 的 DOM 容器，并创建一个 React 根节点。
- 将 React 组件渲染到 DOM 中的根节点。
- 更新元素渲染。
- 使用函数组件。
- 启用并发渲染特性。
// 创建一个简单的 React 组件
function App() {
return <h1>Hello, React 18!</h1>;
}
// 获取 id 为 "example" 的 DOM 容器，并创建一个 React 根节点
const root = ReactDOM.createRoot(document.getElementById('example'));
// 渲染 React 组件到 DOM 中的根节点
root.render(<App />);
