big-react - 私に従って、0からReact18を実装してください

(跟着我,从0实现React18)

Created at: 2020-01-10 14:30:06
Language: TypeScript

Big-React

次の機能を使用して、Reactv18のコア機能を最初から実装します。

  • 👬Reactソースコードに最も近い最小限の実装
  • 💪実装は最小限ですが、機能は完全であり、現在実行できる公式テストケースの数は次のとおりです。25
  • 🚶反復ステップ
    Git Tag
    を分割し、0から実装された各関数を記録します

TODOリスト

エンジニアリング要件

タイプ コンテンツ 完了 どのバージョンで実装されましたか
建築 monorepo(pnpmで実装) v1
仕様 eslint v1
仕様 よりきれい v1
仕様 commitlint+ハスキー v1
仕様 リントステージ v1
仕様 tsc v1
テスト ジェスト環境のセットアップ v4
仕様 tsc v1
構築する バベル構成 v4
構築する 開発環境パッケージのビルド v1
構築する Prod環境パッケージの構築 ⬜️
配備 GithubActionはlintとtestを実行します ⬜️
配備 GithubActionはタグに従ってnpmパッケージを公開します ⬜️

フレームワークの要件

現在、17の公式Reactテストケースを実行しています

タイプ コンテンツ 完了 どのバージョンで実装されましたか
反応する JSXトランスフォーメーション v1
反応する React.isValidElement v4
ReactDOM ブラウザ環境DOMの挿入 v2
ReactDOM ブラウザ環境のDOMの動き v7
ReactDOM ブラウザ環境DOMでの属性の変更 ⬜️
ReactDOM ブラウザ環境のDOM削除 v5
ReactDOM ReactTestUtils v4
ReactNoop ReactNoopレンダラー ⬜️
調停者 ファイバーアーキテクチャ v1
調停者 イベントモデル v6
調停者 onClickイベントのサポート v6
調停者 入力要素onChangeイベントのサポート ⬜️
調停者 レーンモデル ⬜️
調停者 基本的な更新メカニズム v1
調停者 優先的にメカニズムを更新する ⬜️
調停者 単一ノードのマウントプロセスを挿入します v1
調停者 マルチノードマウントプロセスを挿入します v7
調停者 単一ノード調整プロセスを挿入します v5
調停者 マルチノード調整プロセスを挿入します v7
調停者 ノードを削除するための調整プロセス v5
調停者 HostTextタイプのサポート v2
調停者 HostComponentタイプのサポート v1
調停者 HostRootタイプのサポート v1
調停者 FunctionComponentタイプのサポート v3
反応する マウント時にフックアーキテクチャが実装されます v3
反応する フックスキーマが更新されたときに実装されます v5
調停者 useStateの実装 v3
調停者 useEffectの実装 ⬜️
調停者 useRefの実装 ⬜️
調停者 レガシースケジューリングプロセス ⬜️
調停者 並行スケジューリングプロセス ⬜️
調停者 例外処理プロセス ⬜️
調停者 useErrorBoundaryの実装 ⬜️

デバッグ

3つのデバッグ方法を提供します。

  1. ライブデバッグ

実行

pnpm demo
すると
demos
、プロジェクトディレクトリでサンプルプロジェクトが実行されます(デフォルトのプロジェクトはv7のデバッグプロジェクトです)。

このアプローチの利点は次のとおりです。

  • コンソールは各メインステップの実行情報を出力し、実行プロセスを視覚的に確認できます

  • ホットアップデート(サンプルコードとソースコードを含む)

  1. pnpmリンク

テストプロジェクトに合格

CRA
または
Vite
開始した後、パッケージを
React
実行し、このプロジェクトで、およびテストプロジェクトで、プロジェクトに依存するものをパッケージ化されたものに置き換えます。
pnpm run build:dev
react
react-dom
pnpm link
react
react-dom
react
react-dom

この方法の利点は次のとおりです。プロジェクトでの実際の使用

React
に最適です。

  1. React
    公式テストケースを実行する

パッケージ化された

pnpm test
テストケースを参照する公式テストケースを実行して実行します。
pnpm run build:dev
react
react-dom

この方法の利点は、公式のユースケースの観点から、フレームワークの実装の詳細とさまざまな境界条件を観察できることです。

変更ログ

v7

次の関数を含む、マルチノード調整プロセス(一般にDiffアルゴリズムとして知られている)を実装しました。

  • 更新時にonClickコールバックが更新されなかったバグを修正しました

  • マルチノードマウントプロセスを挿入します

  • マルチノード調整プロセスを挿入します

  • ブラウザ環境のDOMの動き

Diffアルゴリズムのテストケースは、useEffectとuseRefの実装にも依存します。これらは後で実装されます。

v6

次の機能を含むイベントシステムを実装します。

  • イベントモデル
  • onClickイベントのサポート(およびonClickCaptureイベント)

v5

次の機能を含む単一ノードの更新を実装します。

  • ブラウザ環境DOMの削除(たとえば、h3がpになると、h3の削除とpの挿入が行われます)
  • 単一ノードの調整プロセス(HostComponent、HostTextを含む)を挿入します
  • ノードを削除する調整プロセス(後続のrefおよびuseEffect機能の準備、実装は比較的完了しています)
  • フックスキーマが更新されたときに実装されます

v4

次の関数を含む、テスト関連のアーキテクチャを初期化します。

  • React.isValidElementを実装する
  • ジェスト環境のセットアップ
  • バベル構成
  • ReactTestUtils
  • jsxの17の公式ユースケースを実行します

v3

useStateのマウント時間を実装するプロセスには、次の関数が含まれます。

  • FunctionComponentタイプのサポート
  • マウント時にフックアーキテクチャが実装されます
  • useStateの実装

v2

次の関数を含む、単一ノードのマウントプロセス(ブラウザー環境でDOMをレンダリングできる)を挿入します。

  • ブラウザ環境DOMの挿入
  • HostTextタイプのサポート

v1

次の関数を含む、単一ノードのレンダリング段階にマウントプロセスを挿入します。

  • JSXトランスフォーメーション
  • ファイバーアーキテクチャ
  • 単一ノード調整プロセスを挿入します
  • HostComponentタイプのサポート
  • HostRootタイプのサポート

注:ブラウザ環境でのレンダリングはまだ実装されていません