跳到主要内容

认识

2024年02月29日
柏拉文
越努力，越幸运

一、认识​

createRoot() 允许在浏览器的 DOM 节点中创建根节点以显示 React 组件。用于客户端创建 React 渲染的根节点, 有 render 和 unmount 两个方法。

二、语法​

const root = createRoot(domNode, options?)

root.render(reactNode);

root.unmount();

  • domNode: 一个 DOM 元素。React 将为这个 DOM 元素创建一个根节点然后允许你在这个根节点上调用函数，比如 render 来显示渲染的 React 内容。

  • options: 用于配置这个 React 根节点的对象

    • onRecoverableError: 回调函数，在 React 从异常错误中恢复时自动调用

    • identifierPrefix: 一个 React 用来配合 useId 生成 id 的字符串前缀。在同一个页面上使用多个根节点的场景下，这将能有效避免冲突。

  • root: 返回一个带有两个方法的的对象，这两个方法是：render 和 unmount。

三、用法​

渲染一个完全由 React 构建的应用, 流程如下:

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

  1. 获取 HTML 中定义的 DOM 节点

  2. 在该 DOM 节点中显示 React 组件