字数

750 字

阅读时间

4 分钟

react 分为两部分， 一部分是 react-dom,用来控制react虚拟dom生成真是dom, 另一部分是react 库, 用来写组件来生成虚拟dom树

React 库：React 库（react）的核心方法包括 React.createElement，用于创建虚拟 DOM 元素。

react-dom的核心方法是reactdom.render; React.createElement 创建的虚拟 DOM 最终是通过 ReactDOM.render 渲染到真实 DOM 上的。React 17 版本之后，React 引入了新的根 API，采用了 ReactDOM.createRoot 来取代 ReactDOM.render。createRoot 是一个新的方法，用来启用 React 的新根 API，来处理更高效的渲染。

框架的最主要的优点有三个,重要程度从上到下 一是 数据驱动视图, 编写但页面应用成本更低 二是 时间复杂度更低, 主要通过differ算法,利用事件委托形成的合成事件机制 来减少dom操作 三是,动态优先级,可中断机制 让渲染顺序可控

使用虚拟dom可以减少重排节省资源

为啥后端从来不用状态管理

ReactDOM.render()

ReactDOM.render() 是 React 中用于将 React 元素渲染到 DOM 的方法。它是 React DOM 提供的一个重要函数，通常用于将整个应用程序的根组件渲染到页面上。

基本用法：

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => (
  <div>
    <h1>Hello, React!</h1>
    <p>This is a simple React app.</p>
  </div>
);

// 将根组件渲染到页面上的指定元素中
ReactDOM.render(<App />, document.getElementById('root'));

在上述示例中：

• App 是一个简单的 React 组件。
• ReactDOM.render(<App />, document.getElementById('root')) 将 App 组件渲染到具有 id 为 'root' 的 DOM 元素中。

参数：

ReactDOM.render() 接收两个参数：

1. 第一个参数： React 元素或组件，用于渲染到页面上。

2. 第二个参数： 一个 DOM 元素，表示渲染的目标容器。

注意事项：

1. 只能调用一次： 通常，ReactDOM.render() 只应该在应用程序的入口文件中调用一次。它负责渲染整个应用程序的根组件。子组件的更新和渲染由 React 自动处理。

2. 根 DOM 元素： 第二个参数应该是一个有效的 DOM 元素，表示你想要将 React 应用程序渲染到的位置。在上述示例中，document.getElementById('root') 返回具有 'root' id 的元素。

3. 组件的挂载： ReactDOM.render() 将 React 组件挂载到指定的 DOM 元素上，从而启动组件的生命周期。

4. 动态更新： 一旦应用程序启动，React 将负责处理组件状态和属性的变化，并在需要时动态更新 DOM。

总的来说，ReactDOM.render() 是启动 React 应用程序的入口点，它将根组件渲染到指定的 DOM 元素上。

贡献者

sunchengzhi

文件历史

最后编辑于 大约 2 个月前查看完整历史

de5fa-fix:修改文件名