从 react 目录看 react 核心包结构

核心包结构

react 项目采用的是 Monorepo 的项目结构,packages 目录下有 35 个目录,但对于核心原理的了解,实际只有 4 个包,分别是 react、react-dom、react-reconciler、scheduler(版本是 18.2.0),下面我们先简单介绍一下这 4 个包的主要用途

react:基础包,提供创建 react 组件、状态管理、生命周期管理等必要的函数,我们在开发过程中使用的 api 主要都来自这个包的定义

react-dom:web 应用的渲染器,主要作用是将 React 组件转换为 DOM 节点,并渲染在浏览器上。在 React 18 中,更推荐使用的渲染 api 是 createRoot.render,在 concurrent 模式(并发模式)下性能更好

react-reconciler:react 的核心包,通过实现协调算法(diff 算法)管理 react 状态的输入和输出,主要功能包括

  • 接受状态输入,将更新逻辑封装到回调函数
  • 将回调函数放入 scheduler 进行调用执行
  • 回调函数执行完成后获取到更新结果,交给渲染器(react-dom 或 react-native)渲染到页面上

scheduler:从名字就可以看出是一个调度器,主要有两个功能

  1. 通过调整任务的优先级,控制 react-reconciler 放入的回调函数的执行时机
  2. 在 concurrent 模式(并发模式)下实现任务分片,也就是可以暂时中断低优先级的任务,执行高优先级的任务,高优先级完成后再继续执行低优先级的任务

下面用一个例子来简单的说明这 4 个包作用,这是一段典型的 react 代码,点击 "+1" 按钮后统计数字会 +1

tsx 复制代码
import { useState } from 'react'

function App() {
  const [count, setCount] = useState(0)

  function handleClick() {
    setCount(count + 1)
  }

  return (
    <>
      <div>{count}</div>
      <button onClick={handleClick}>+1</button>
    </>
  )
}

export default App

首先在这段代码中,通过 react 包导入了一个方法 useState,用于管理 App 组件内部定义的 count 状态

当点击 +1 按钮后,会调用 setCount 方法更新组件的状态,此时 react-reconciler 包会收到 setCount 方法发起的更新请求,对比虚拟 DOM 并决定是否需要更新,然后将更新请求包装为一个回调函数,发送给 scheduler 包

scheduler 包在接收到更新函数后,会根据任务的优先级放入到任务队列,然后循环执行任务队列中的任务,直到任务清空

setCount 更新任务在 scheduler 中执行完成后,react-reconciler 包将更新的结果发送给 react-dom 包,react-dom 将更新结果转换为真实的 DOM 并渲染在页面上

总结

react 18 中核心的 4 个包分别是

  • react:定义组件和管理组件内部状态
  • react-reconciler:管理状态的输入和输出
  • scheduler:管理任务的优先级和调度
  • react-dom:渲染 react 组件到 web 页面上

最后用一张图来总结一下 4 个核心包的作用和相互关系

Î

相关推荐
街尾杂货店&6 分钟前
webpack - 单独打包指定JS文件(因为不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改)
前端·javascript·webpack
月光技术杂谈8 分钟前
用Deepseek 实现一个基于web的扣图应用
前端·javascript·html5·ccs·tensorflow.js·canvas api
金梦人生1 小时前
Css性能优化
前端·css
Holin_浩霖1 小时前
UI设计的底层逻辑:从组件到系统的跃迁
前端
Holin_浩霖1 小时前
前端开发者的 Web3 全图解实战 二
前端
写代码的皮筏艇1 小时前
CSS属性继承与特殊值
前端·css
kevlin_coder1 小时前
🚀 实现同一个滚动区域包含多个虚拟滚动列表
前端·javascript
金梦人生1 小时前
JS 性能优化
前端·javascript
我有一棵树1 小时前
使用Flex布局实现多行多列,每个列宽度相同
前端·css·html·scss·flex
浪裡遊1 小时前
React开发模式解析:JSX语法与生命周期管理
前端·javascript·react.js·前端框架·ecmascript