React源码下载-本地环境搭建

迈不过友情╰ 2023-10-06 14:32 29阅读 0赞

### 前几天有小伙伴和我聊天，谈到现在前端面试越来越难，动不动就是xxx原理，有没有看过xx源码之类的问题, 之后就问我应该怎么来学习现在主流框架的源码，于是有了这一篇文章. ###

说到使用react那很简单 react 和reactdom 两个文件引入一下就ok，但是这两个文件是经过编译打包，我们无法在里面进行断点调试或者console调试， 所以想学习框架源码，第一步就要在本地运行源码这样才能在内部进行各种输出调试。

好了闲话不说，直接开始正题

#### **React源码获取** ####

在这里我选择用的的版本是16.10.0 ， 获取方式当然是react的git仓库

#### **创建测试项目** ####

*  在本地通过create-react-app创建测试项目
 *  创建完项目之后要修改源码以及webopack配置,需要 将‘旺旺大礼包’给解出来 npm run eject
 *  项目目录下会多出一个config文件

![8c2206e2685541608d1adfc370bff5e3.png][]

**将创建的项目替换为下载的源码文件**

*  将下载16.10.0的项目源码丢到src目录下

![305b745d148f4c9aa44471d17b297c49.png][]

*  更改配置文件 ==/config/webpack.config.js== 在运行项目的时候编译我们导入的源码为

resolve:{
            ...,
            alias: {
            // Support React Native Web
            // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
            // 'react-native': 'react-native-web',
            // Allows for better profiling with ReactDevTools
            // ...(isEnvProductionProfile && {
            //   'react-dom$': 'react-dom/profiling',
            //   'scheduler/tracing': 'scheduler/tracing-profiling',
            // }),
            // ...(modules.webpackAliases || {}),
            'react': path.resolve(__dirname, '../src/react/packages/react'),
            'react-dom': path.resolve(__dirname, '../src/react/packages/react-dom'),
            'legacy-events': path.resolve(__dirname, '../src/react/packages/legacy-events'),
            'shared': path.resolve(__dirname, '../src/react/packages/shared'),
            'react-reconciler': path.resolve(__dirname, '../src/react/packages/react-reconciler'),
          },
        }

> 错误处理

替换完成后，因为版本和编译的原因会遇到各种错误， 具体的错误类型与解决方式，在这里做一个简单的介绍

#### **flow 检测报错** ####

![dba56f2bea4d4bca8cd5c23fb8debda9.png][]

*  由于react的源码中采用了flow这个东东做类型检查， 所以我们需要安装 ==@babel/plugin-transform-flow-strip-types== 这个插件忽略类型检测
 *  插件安装

npm install @babel/plugin-transform-flow-strip-types -D

*  插件配置

//在webpack.config.js的babel-loader中添加配置
        {
            test: /\.(js|mjs|jsx|ts|tsx)$/,
            include: paths.appSrc,
            loader: require.resolve('babel-loader'),
            options: {
            customize: require.resolve(
              'babel-preset-react-app/webpack-overrides'
            ),
        
            plugins: [
              ...,
              [require.resolve('@babel/plugin-transform-flow-strip-types')]
              // 配置忽略flow类型检测
            ],
            ...
        }

#### **HostConfig配置错误** ####

![2b94c77265ef4dfd8ae909da9f09815b.png][]

修改文件 ==src/react/packages/react-reconciler/src/ReactFiberHostConfig.js==, 根据环境去导出HostConfig。

//添加以下代码 
    export * from './forks/ReactFiberHostConfig.dom';

#### **部分全局变量报错** ####

![291c1659144f4c3cae187bf9c9b62ae7.png][]

*  修改 ==/config/env.js== 中的stringifed对象增加属性

#### **hasOwnProperty ReactSharedInternals.js错误** ####

![format_png][]

*  修改文件 ==src/react/packages/shared/ReactSharedInternals.js。==

// react此时未export内容，直接从ReactSharedInternals拿值
    // import React from 'react';
    // 此时React为undefined
    // const ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
    
    import ReactSharedInternals from '../react/src/ReactSharedInternals';

#### **invariant() 函数报错** ####

![9c6a9b4e480c418caa8649a6e33188ba.png][]

*  ==src/react/packages/shared/invariant.js== 文件下 invariant 函数的错误处理
 *  修改如下:

export default function invariant(condition, format, a, b, c, d, e, f) {
      if(condition) return ;
      throw new Error(
        'Internal React error: invariant() is meant to be replaced at compile ' +
          'time. There is no runtime version.',
      );
    }

到此为止现在运行的react项目采用的使我们下载导入的react16.10.0的源码，我们就可以在源码里进行输出的错误调试

比如我在react/index.js源码 进行输出测试

'use strict';
    
    const React = require('./src/React');
    console.log('源码测试',React)
    // TODO: decide on the top-level export form.
    // This is hacky but makes it work with both Rollup and Jest.
    module.exports = React.default || React;

![d96b47e6ce814bf5bc1b7446f3b39c7c.png][]

嫌弃本地测试环境配置太麻烦的话，各位小主可以直接从下面的地址拉取我配置好的开发项目

https://github.com/fchangjun/ReactSourceCodeAnalyze.git

[8c2206e2685541608d1adfc370bff5e3.png]: https://img-blog.csdnimg.cn/8c2206e2685541608d1adfc370bff5e3.png
[305b745d148f4c9aa44471d17b297c49.png]: https://img-blog.csdnimg.cn/305b745d148f4c9aa44471d17b297c49.png
[dba56f2bea4d4bca8cd5c23fb8debda9.png]: https://img-blog.csdnimg.cn/dba56f2bea4d4bca8cd5c23fb8debda9.png
[2b94c77265ef4dfd8ae909da9f09815b.png]: https://img-blog.csdnimg.cn/2b94c77265ef4dfd8ae909da9f09815b.png
[291c1659144f4c3cae187bf9c9b62ae7.png]: https://img-blog.csdnimg.cn/291c1659144f4c3cae187bf9c9b62ae7.png
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWNiLnpoaW1nLmNvbS84MC92Mi03NjU1NWI0ZWYwMGRmMzY0NGE0MGUzN2RlZThhZjdjYV83MjB3LnBuZw?x-oss-process=image/format,png
[9c6a9b4e480c418caa8649a6e33188ba.png]: https://img-blog.csdnimg.cn/9c6a9b4e480c418caa8649a6e33188ba.png
[d96b47e6ce814bf5bc1b7446f3b39c7c.png]: https://img-blog.csdnimg.cn/d96b47e6ce814bf5bc1b7446f3b39c7c.png