ReactJS - createRoot() 方法

---

---

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 返回 undefined。

示例

因此，我们可以通过三种不同的方式使用 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);

输出

我们可以对同一个根多次调用 render。

总结

React JS 中的 createRoot 函数是为我们的组件创建新的渲染区域的一种方式。它允许我们通过创建新的根 ReactDOM 渲染树在我们的应用中拥有独立的部分。这对于保持应用的不同部分井然有序且相互隔离很有帮助。简单来说，它提供了一个干净的底板，可以在单独的容器中渲染组件。