zhangdizhangdi

React 源码分析

环境准备

bash
npm init
npm add -D vite
bash
git clone git@github.com:facebook/react.git debug/react19-source # debug/react19-source 本地文件夹名字
cd react19-source
yarn

遇到问题

electron

报错
bash
error /Users/zhangdi/repo/test-and-demo/debug/react19-source/node_modules/electron: Command failed.
Exit code: 1
Command: node install.js
Arguments:
Directory: /Users/zhangdi/repo/test-and-demo/debug/react19-source/node_modules/electron
Output:
RequestError: connect ETIMEDOUT 20.205.243.166:443
    at ClientRequest.<anonymous> (/Users/zhangdi/repo/test-and-demo/debug/react19-source/node_modules/got/dist/source/core/index.js:970:111)
bash
yarn config set electron_mirror https://npmmirror.com/mirrors/electron/

java

报错
bash
-- PLUGIN_ERROR (scripts/rollup/plugins/closure-plugin) --
Error: java -jar /Users/zhangdi/repo/test-and-demo/debug/react19-source/node_modules/google-closure-compiler-java/compiler.jar --compilation_level=SIMPLE --language_in=ECMASCRIPT_2020 --language_out=ECMASCRIPT5_STRICT --emit_use_strict=true --env=CUSTOM --warning_level=QUIET --source_map_include_content=true --use_types_for_optimization=false --process_common_js_modules=false --rewrite_polyfills=false --inject_libraries=false --allow_dynamic_import=true --assume_function_wrapper=true --renaming=false --js=/var/folders/pq/sbmn0q1145n3c1n9rb748z0r0000gn/T/tmp-34046kWbvd4SesYBR

The operation couldn’t be completed. Unable to locate a Java Runtime.
Please visit http://www.java.com for information on installing Java.
    at /Users/zhangdi/repo/test-and-demo/debug/react19-source/scripts/rollup/plugins/closure-plugin.js:16:16

解决方法：安装java jdk 11

结构

js 写的，flow 做类型定义
Flow for VS Code

  • react
  • react-dom
  • react-dom-bindings
  • react-client
  • react-reconciler：Fiber的主要文件
  • scheduler
  • shared：公用文件，包含了基本类型数据结构和公用方法
  1. flow-remove-types
  2. \_packages/react-reconciler/src/ReactFiberConfig.js
js
// 📌 修改前
// throw new Error('This module must be shimmed by a specific renderer.');

// 📌 修改后
export * from './forks/ReactFiberConfig.dom'
  1. vite.config.js