この記事はPReact10.5.13のソースコードを理解するのに役立ちます

'./constants' から { EMPTY_OBJ, EMPTY_ARR } をインポートします。
'./diff/index' から commitRoot、diff をインポートします。
'./create-element' から createElement, Fragment をインポートします。
'./options' からオプションをインポートします。

/**
 * Preact仮想ノードをDOM要素にレンダリングする
 * @param {import('./internal').ComponentChild} vnode レンダリングする仮想ノード
 * @param {import('./internal').PreactElement} parentDom インポートするDOM要素
 * レンダリングする
 * @param {import('./internal').PreactElement | object} [replaceNode] オプション: 再利用を試みる
 * `replaceNode` をルートとする既存の DOM ツリー
 */
エクスポート関数render(vnode, parentDom, replaceNode) {
 if (options._root) options._root(vnode, parentDom);

 // `hydrate()` の `replaceNode` パラメータを悪用して、
 // DOMの代わりに`hydrate`関数を渡すことでハイドレーションモードかどうかを指定します
 // 要素..
 isHydrating = typeof replaceNode === 'function' とします。

 // 同じページに対して `render()` を複数回呼び出すことをサポートできるようにするには
 // DOMノードを取得するには、前のツリーへの参照を取得する必要があります。
 // これはDOMノードに新しい`_children`プロパティを割り当てることで実現されます。
 // 最後にレンダリングされたツリーに追加します。デフォルトではこのプロパティは存在しないため、
 // は、初めて新しいツリーをマウントすることを意味します。
  // DOM ノード上のレンダリング関数への複数の呼び出しをサポートするには、DOM ノードに drinking を追加して、最後のレンダリングを指す仮想 DOM ツリーを取得する必要があります。
  // このプロパティはデフォルトで null を指しています。つまり、初めて新しいツリーを装備することになります // したがって、最初は oldVNode は null です (isHydrating の値に関係なく)。ただし、このノードで render を繰り返し呼び出すと、oldVNode に値が割り当てられます let oldVNode = isHydrating
  ? ヌル
  : (replaceNode && replaceNode._children) || parentDom._children;

 // vnode を Fragment でラップし、replaceNode に vnode を割り当て、parentDom の _children = (
  (!isHydrating && replaceNode) ||
  親ドメイン
 )._children = createElement(フラグメント、null、[vnode]);

 // 比較後に呼び出す必要があるエフェクトのリスト。
  // cdm や cdu など、diff 後にさまざまなライフサイクル処理を実行する必要があるコンポーネントを配置するために使用します。componentWillUnmount は diffChildren の unmount 関数内で実行され、commitRoot が使用されている場合は実行されません。let commitQueue = [];
 差分(
  parentDom, // これは、parentDomの_childrenプロパティを使用して[vnode]を指します。 // 新しいvnodeツリーを決定し、DOM要素に格納します。
  // カスタム `_children` プロパティ。
  vノード、
  oldVNode || EMPTY_OBJ, // 古いツリー EMPTY_OBJ,
  parentDom.ownerSVGElement !== 未定義、
    // extraDomChildren、このパラメータはDOMの再利用に使用されます! isHydrating && replaceNode
   ? [ノードを置換]
   : 古いVNode
   ? ヌル
   : parentDom.firstChild // parentDom に子ノードがある場合、子ノード全体が再利用されるノードとして使用されますか? EMPTY_ARR.slice.call(parentDom.childNodes)
   : ヌル、
  コミットキュー、
    // oldDom、後続のメソッドで挿入位置をマークするために使用されます!isHydrating && replaceNode
   ? ノードを置換
   : 古いVNode
   ? 古いVNode._dom
   : 親Dom.firstChild、
  水分補給
 );

 // キューに入れられたエフェクトをすべてフラッシュする
  // commitQueue 内のすべての nodes_renderCallbacks でメソッド commitRoot(commitQueue, vnode) を呼び出します。
}

/**
 * Preact仮想ノードのデータを使用して既存のDOM要素を更新する
 * @param {import('./internal').ComponentChild} vnode レンダリングする仮想ノード
 * @param {import('./internal').PreactElement} parentDom インポートするDOM要素
 * アップデート
 */
エクスポート関数hydrate(vnode, parentDom) {
 レンダリング(vnode、parentDom、hydrate);
}

'preact' から {createContext、h、render} をインポートします。

定数FontContext = createContext(20);

関数Child() {
 <FontContext.Consumer> を返す
 {fontSize=><div style={{fontSize:fontSize}}>子</div>}
 </FontContext.Consumer>
}
関数App(){
 <Child/> を返す
}
与える（
 <FontContext.Provider 値 = {26}>
 <アプリ/>
 </FontContext.Provider>,
 ドキュメント.getElementById('アプリ')
);

'./component' から enqueueRender をインポートします。

エクスポートlet i = 0;

エクスポート関数createContext(defaultValue, contextId) {
 contextId = '__cC' + i++; // 一意のIDを生成する

 定数コンテキスト = {
  _id: コンテキストID、
  _defaultValue: デフォルト値、
  /** @type {import('./internal').FunctionComponent} */
  コンシューマー(props, contextValue) {
   // props.children( を返す
   // context[contextId] ? context[contextId].props.value : defaultValue
   // );
   props.children(contextValue) を返します。
  },
  /** @type {import('./internal').FunctionComponent} */
  プロバイダー(props) {
   if (!this.getChildContext) { // 初めて呼び出されたときにいくつかの初期化操作を実行します let subs = [];
    ctx = {} とします。
    ctx[コンテキストID] = this;
       
       // diff 操作では、コンポーネントが Consumer 内にあると判断された場合、sub が呼び出されて subscribe されます。
       // 同時に、このノードの後続のすべての差分はこのコンテキストを保持し、サブメソッドを呼び出して // コンテキストには階層的な優先順位があり、コンポーネントは最も近いコンテキストに最初に追加されます this.getChildContext = () => ctx; 

    this.shouldComponentUpdate = function(_props) {
     if (this.props.value !== _props.value) {
      // ここでの強制的な値の伝播は、`options.debounceRendering` がバイパスされている場合にのみ必要だったと思います:
      // https://github.com/preactjs/preact/commit/4d339fb803bea09e9f198abf38ca1bf8ea4b7771#diff-54682ce380935a717e41b8bfc54737f6R358
      // ただし、これらのケースでは、値を修正しても、すべてのノードが二重にレンダリングされます。
      // 強制同期モードを使用しないように伝える方がよいかもしれません。
      // 現在、クラス コンポーネントで `useContext()` を使用すると、その `this.context` 値が上書きされます。
      // subs.some(c => {
      // c.context = _props.value;
      // レンダリングをキューに追加します(c);
      // });

      // subs.some(c => {
      // c.context[contextId] = _props.value;
      // レンダリングをキューに追加します(c);
      // });
            // enqueueRender は最終的に renderComponent 関数に入り、diff、commitRoot、updateParentDomPointers などの操作を実行します。subs.some(enqueueRender);
     }
    };

    this.sub = c => {
     subs.push(c);// サブスクリプション配列を入力します。
     古いものを c.componentWillUnmount にします。
     c.componentWillUnmount = () => { // componentWillUnmountをオーバーライドする
      subs.splice(subs.indexOf(c), 1);
      (古い) の場合、old.call(c);
     };
    };
   }

   props.children を返します。
  }
 };

 // Devtoolsはコンテキストオブジェクトにアクセスする必要がある。
 // プロバイダに遭遇します。これはサポートするために必要です
 // 代わりにコンテキストオブジェクトに `displayName` を設定します
 // コンポーネント自体に。参照:
 // https://reactjs.org/docs/context.html#コンテキスト表示名
 // createContext は最終的に、Provider と Consumer の 2 つの関数を持つコンテキスト オブジェクトを返します。// 同時に、Consumer 関数の contextType プロパティと Provider 関数の _contextRef プロパティは両方ともコンテキストを指します。
 戻り値 (context.Provider._contextRef = context.Consumer.contextType = context);
}

c.getChildContext が null の場合
    グローバルコンテキスト = 割り当て(割り当て({}、グローバルコンテキスト)、c.getChildContext());
   }

   if (!isNew && c.getSnapshotBeforeUpdate != null) {
    スナップショット = c.getSnapshotBeforeUpdate(oldProps, oldState);
   }

   isTopLevelFragment = とします
    tmp != null && tmp.type === Fragment && tmp.key == null;
   renderResult を isTopLevelFragment とします。tmp.props.children: tmp;

   diffChildren(
    親ドメイン、
    Array.isArray(renderResult) ? renderResult : [renderResult],
    新しいVNode、
    古いVNode、
    グローバルコンテキスト、
    、
    過剰DomChildren、
    コミットキュー、
    オールドドム、
    水分補給
   );

// 新しいコンポーネントをインスタンス化する
    newType に 'prototype' が含まれる場合、newType.prototype.render が返されます。
     // @ts-ignore 上記のチェックはnewTypeが構築されることを検証します
     newVNode._component = c = new newType(newProps, componentContext); // eslint-disable-line new-cap
    } それ以外 {
     // @ts-ignore 信じてください、コンポーネントは私たちが望むインターフェースを実装します
     newVNode._component = c = 新しいコンポーネント(newProps、componentContext);
     c.コンストラクタ = newType;
     c.render = doRender;
    }

/** PFC バッキング インスタンスの `.render()` メソッド。 */
関数doRender(props, state, context) {
 this.constructor(props, context) を返します。
}