数日の小さなパートナーとI xxのソースのような問題を見ていない、今ますます困難毎ターンがxxxの原則であるインタビューのフロントエンドの話、話していた前に、
あなたは、今主流のソースフレームワーク必要がありますので、この記事でを学ぶためにどのように私に尋ねる後。
それはそれを使用することになると非常に単純な反応とreactdomは二つの文書を導入し反応され、[OK]をクリックして、これらの2つのファイルは、パッケージをコンパイルされ、我々は、コンソールをデバッグするか、内部にブレークポイントをデバッグすることはできません
私は、ソースコードのフレームワークを学びたいので、最初のステップは、ローカルソース内で実行、デバッグ出力の様々なを実行するために必要です。
まあ、ゴシップは言っていない、単に話題を開始
ソースコードを取得するように反応
ここで私はバージョン16.10.0を使用することにしました、
もちろん取得のgitリポジトリを反応させます
テストプロジェクトを作成します。
-
ローカルに作成反応するアプリを通じてテストプロジェクトを作成します。
-
あなたがソースコードとwebopack設定を変更するプロジェクトを作成した後、我々は解決策を出てくる「まくるをしたい」する必要があります
npm run eject - プロジェクトディレクトリの下に設定ファイルのよりになります
このプロジェクトは、ダウンロードしたソースコードファイルを置き換えるために作成されました
- プロジェクトのソースコードのダウンロード16.10.0 srcディレクトリに投げ込ま
- 設定ファイル== /設定/ 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'),
},
}
エラー処理
交換が完了し、かつ理由コンパイラのバージョンのさまざまなエラーが発生します後、
エラーと解決策の具体的な種類は、ここでは簡単な紹介を行うには
フロー検出誤差
- このようなものを行うには、フロー型チェックを使用したソースコードを反応させることにより、
私たちは、このプラグインはタイプの検出を無視== == @バベル/プラグイン・変換・フロー・ストリップ・タイプをインストールする必要がありますので、
- プラグインのインストール
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に設定エラー
- hostconfigに環境をエクスポートするに従って、ファイル==のsrc /反応/パッケージ/反応し、競合回避/ srcに/ ReactFiberHostConfig.js ==を変更します。
//添加以下代码
export * from './forks/ReactFiberHostConfig.dom';
グローバル変数エラーの一部
- stringifedオブジェクト修飾== /設定/ env.js ==増加プロパティ
const stringified = {
'process.env': Object.keys(raw).reduce((env, key) => {
env[key] = JSON.stringify(raw[key]);
return env;
}, {}),
"__DEV__": true,
"__PROFILE__": true,
"__UMD__": true
};
hasOwnPropertyをReactSharedInternals.js错误
- ファイル== SRC /反応/パッケージ/共有/ 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';
所与の不変（）関数
-
SRC /反応/パッケージ/共有/ invariant.js ==ファイル不変機能==下でのエラー処理
- 次のように改正：
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.',
);
}
これまでのプロジェクトは、今、我々は、ダウンロード輸入react16.10.0に使用されるソースコードを実行して反応する、我々は中にデバッグ出力をソースコードに間違っている可能性があります
例えば、私は出力が反応試験/ 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;
ローカルテスト環境の構成面倒軽蔑、あなたは直接の小さなメインgitの私のプロジェクトから私は、ドロップダウン開発プロジェクトを構成しことができます
npm install
npm start
ギット
ReactSourceCodeAnalyze：
https://github.com/fchangjun/ReactSourceCodeAnalyze.git
あなたはこの記事が役に立つと感じた場合は、主な社会的関心の小さな数を喜ばせる、容易に次を転送。