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 渲染樹在我們的應用中擁有獨立的部分。這對於保持應用的不同部分井然有序且相互隔離很有幫助。簡單來說，它提供了一個乾淨的底板，可以在單獨的容器中渲染元件。