ReactJS - createRoot() 方法

更新于 2025/3/23 7:37:17

createRoot 是 React 的重要组成部分，React 是一个重要的 Web 开发框架。它允许我们将 React 代码快速集成到网页中。它就像我们 React 项目的核心，我们所有的 Web 功能都保存在这里。我们还可以改变它的工作方式来改进我们的 Web 应用程序。因此，我们将看到 createRoot 的重要性。

因此，createRoot 允许我们在网页中设置一个特殊位置，我们可以在其中显示我们的 React 内容。

当我们使用 createRoot 时，它会为我们提供一个可以挂载 React 组件的新容器元素。这在我们希望应用程序中的独立部分不会相互干扰的情况下非常有用。

语法

下面是如何使用的示例 −

使用它在我们的网页上为我们的 React 代码创建一个特殊位置。

const root = createRoot(domNode,optionalObject)

使用它来实际显示我们使用 React 创建的内容。

root.render(reactNode)

使用它来实际显示我们使用React。

root.render(reactNode)

如果我们想将 React 代码从网页中移除，可以使用它。

root.unmount()

参数

domNode − 这是网页的一部分，就像一个框，React 会将我们的代码放在这里。我们可以使用它来做一些事情，比如展示我们用 React 制作的东西。
可选选项 −如果需要，我们可以使用它来自定义我们的 React 代码在该框中的工作方式。
reactNode − 它就像我们想要使用 React 显示的东西。

返回值

createRoot 返回的对象有两种方法:render 和 unmount。root.render 和 root.unmount 返回未定义。

示例

因此我们可以以三种不同的方式使用 createRoot −

通过渲染完全使用 React 构建的应用程序 − 如果我们的整个 Web 应用程序都是使用 React 制作的，我们可以使用"createRoot"在 Web 上显示整个内容。

示例 1

App.js

import { useState } from 'react';

function CountFunc() {
  const [counter, setCounter] = useState(0);
  return (
    <button onClick={() => setCounter(counter + 1)}>
      This button is clicked {counter} times
    </button>
  );
}

export default function App() {
  return (
    <>
      <h1>Hello, Tutorialspoint!</h1>
      <CountFunc />
    </>
  );
}

index.js

import { createRoot } from 'react-dom/client';
import App from './App.js';
import './styles.css';

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

输出

渲染部分使用 React 创建的页面− 有时，我们可能只想将 React 用于网页的一部分。在这种情况下，我们可以使用"createRoot"来仅显示该部分。

示例 2

App.js

import React, { useState } from "react";
import "./App.css";

function App() {
  const [todos, setTodos] = useState([
    { id: 1, text: "Buy cloths" },
    { id: 2, text: "Finish work" },
    { id: 3, text: "Go for a run" }
  ]);

  return (
    <div className="App">
      <h1>ToDo List</h1>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

const rootDomNode = document.getElementById("root");
const root = ReactDOM.createRoot(rootDomNode);
root.render(<App />);

输出

这是一个显示待办事项列表的简单 React 应用。我们可以修改或自定义此程序以满足我们的需求，添加添加和删除项目、日期等功能。

更新根组件 − 如果我们想使用 React 更改网页上已显示的内容，我们可以使用 createRoot 来执行此操作，而无需更改页面的其他部分。

示例 3

App.js

export default function App({counter}) {
  return (
    <>
      <h1>Hello, Tutorialspoint! {counter}</h1>
      <input placeholder="Type something here" />
    </>
  );
}

index.js

import { createRoot } from 'react-dom/client';
import './styles.css';
import App from './App.js';

const root = createRoot(document.getElementById('root'));

let i = 0;
setInterval(() => {
  root.render(<App counter={i} />);
  i++;
}, 1000);