このモジュールのコードは非常にシンプルで、わずか十数行です。

var ReactElement = require("ReactElement");

var invariant = require("fbjs/lib/invariant");
function onlyChild(children) {
  invariant(
    ReactElement.isValidElement(children),
    "React.Children.only expected to receive a single React element child.",
  );
  return children;
}

module.exports = onlyChild;

これは、渡された children が有効なReact要素であるかどうかを判断し、そうでない場合はエラーをスローするものです。この判断ロジックは ReactElement モジュール内にあります。

ReactElement.isValidElement = function (object) {
  return (
    typeof object === "object" &&
    object !== null &&
    object.$typeof === REACT_ELEMENT_TYPE
  );
};

まとめ#

さて、ここまででReact自体が提供するすべてのAPIとモジュールを確認し終えました。しかし、React自身のこれらのコードを見るだけでは、実際には何も解決できません。例えば、Reactコンポーネントのライフサイクルがどのように実装されているのか、setState がどのように動作するのか、そしてReactコンポーネントがどのようにブラウザにレンダリングされるのかなど、まだ多くの疑問があります。 機会があれば、これらの答えを今後も探求していきたいと思います。

関連記事#

• {% post_link react-source-code-analyze-1 Reactソースコードの深掘り - エントリーファイル %}
• {% post_link react-source-code-analyze-2 Reactソースコードの深掘り - ReactBaseClasses %}
• {% post_link react-source-code-analyze-3 Reactソースコードの深掘り - ReactChildren %}
• {% post_link react-source-code-analyze-4 Reactソースコードの深掘り - ReactElement %}
• {% post_link react-source-code-analyze-5 Reactソースコードの深掘り - onlyChildren %}