ReactDOM.createRoot 和 ReactDOM.render的差别大起底！

React 18 中的 ReactDOM.createRoot 与 ReactDOM.render 的选择指南

背景

在 React 18 中，引入了新的 API ReactDOM.createRoot()，作为 ReactDOM.render() 的替代方案，用于将 React 组件呈现到 DOM 中。这两种 API 都有自己独特的优势和使用场景。本文将深入探讨它们的异同，帮助开发者在不同情况下做出明智的选择。

功能差异

ReactDOM.render()

• 功能： 将 React 组件呈现到指定 DOM 节点中。
• 限制： 仅能用于页面加载时；不支持并发模式；只能呈现一个根组件。

ReactDOM.createRoot()

• 功能： 创建新的根节点，然后将 React 组件呈现到该节点中。
• 优势： 可在页面加载后使用；支持并发模式；可呈现多个根组件。

性能差异

ReactDOM.render()

• 性能： 较低，因其会在每次更新时重新呈现整个组件树，无法利用并发模式的优势。

ReactDOM.createRoot()

• 性能： 较高，因其只呈现受影响的组件，不会重新呈现整个组件树，并可利用并发模式的优势，在后台呈现更新，减少页面卡顿。

使用场景

ReactDOM.render()

• 适用情况： 适合小型、简单的项目，无需并发模式或多个根组件。

ReactDOM.createRoot()

• 适用情况： 适合大型项目，需要并发模式或呈现多个根组件。

选择指南

在选择 ReactDOM.createRoot() 或 ReactDOM.render() 时，需要考虑以下因素：

• 项目规模和复杂性
• 是否需要并发模式
• 是否需要呈现多个根组件

代码示例

ReactDOM.render()

import ReactDOM from "react-dom";

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

ReactDOM.createRoot()

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

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

常见问题解答

1. 为什么在 React 18 中引入了 ReactDOM.createRoot()？

为了提供更好的性能和灵活度，支持并发模式和呈现多个根组件。

2. ReactDOM.render() 是否会被弃用？

目前尚未宣布弃用计划，但建议在适当情况下使用 ReactDOM.createRoot()。

3. 我应该在我的项目中使用哪一个？

取决于项目的具体需求。对于小型项目，ReactDOM.render() 就足够了；对于大型项目，建议使用 ReactDOM.createRoot()。

4. ReactDOM.createRoot() 是否兼容旧版本的 React？

否，它仅在 React 18 及更高版本中可用。

5. 如何迁移到 ReactDOM.createRoot()？

只需将 ReactDOM.render() 替换为 createRoot(root).render() 即可，其中 root 是要呈现到的 DOM 节点。

结论

ReactDOM.createRoot() 和 ReactDOM.render() 都是用于在 React 18 中呈现组件的 API，各有其优势和适用场景。通过了解它们的差异，开发者可以在不同的项目中做出明智的选择，优化性能和应用程序行为。