如何使用React Top Level Api在React中构建和添加子组件

在React中，顶层API（Top-Level API）提供了一种从外部创建和管理React应用的方式，而不是通过传统的组件树结构。React的顶层API主要包括createRoot和render函数，它们允许你在应用的顶层直接渲染组件。

基础概念

createRoot: 这个函数用于创建一个React根节点，它是React 18引入的新特性，用于支持并发模式。
render: 在React 18之前，render函数用于将组件挂载到DOM节点上。在React 18及以后版本中，推荐使用createRoot。

优势

并发模式: createRoot支持并发模式，允许React同时渲染多个任务，提高应用的响应性和性能。
更好的控制: 顶层API提供了对React应用更直接的控制，可以更容易地进行全局状态管理和优化。

类型

函数组件: 使用函数声明的组件。
类组件: 使用ES6类声明的组件。

应用场景

单页应用（SPA）: 在构建复杂的单页应用时，顶层API可以帮助管理全局状态和路由。
服务器端渲染（SSR）: 结合Node.js环境，可以实现服务器端渲染，提升首屏加载速度和SEO。
微前端架构: 在微前端架构中，可以使用顶层API来独立部署和管理各个微应用。

示例代码

以下是如何使用React的顶层API在React中构建和添加子组件的示例：

import React from 'react';
import ReactDOM from 'react-dom/client';

// 定义一个简单的子组件
function ChildComponent({ message }) {
  return <div>{message}</div>;
}

// 定义一个父组件，它将包含子组件
function ParentComponent() {
  return (
    <div>
      <h1>这是一个父组件</h1>
      <ChildComponent message="来自子组件的消息" />
    </div>
  );
}

// 使用React的顶层API创建根节点并渲染父组件
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ParentComponent />);