ReactJS - createRoot() 方法_ReactJS 菜鸟教程

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 做了什么。
optional options - 如果需要，我们可以使用它来自定义我们的 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 />);

输出

hello qikepu !

渲染部分使用 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 />);

输出

todo list

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

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

示例 3

App.js

export default function App({counter}) {
	 return (
	 	 <>
	 	 	 <h1>Hello, Qikepu! {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);

输出

hello tp 4

我们可以在同一根目录上多次调用 render。

总结

React JS 中的 createRoot 函数是一种为我们的组件创建新的渲染区域的方法。它允许我们通过创建一个新的根 ReactDOM 渲染树来在我们的应用程序中拥有独立的部分。这有助于保持应用程序的不同部分的组织和隔离。简单来说，它提供了一个干净的石板来在单独的容器中渲染组件。

<< ReactJS - hydrateRoot() 方法 ReactJS - findDOMNode() 方法 >>