関数コンポーネントは関数プログラミングと同じですか?

React 開発者は、React に 2 つのコンポーネント タイプがあるという事実をすでによく知っています。

• クラスコンポーネント
• 機能コンポーネント

「クラス」と「関数」について考えると、当然次のような疑問が生じます。

• クラスコンポーネントはオブジェクト指向プログラミング (OOP) に関連していますか?
• 関数コンポーネントは関数プログラミング (FP) に関連していますか?

結局のところ、クラス コンポーネントが OOP に関連している場合、OOP の原則 (継承、カプセル化、ポリモーフィズムなど) がクラスベースのコンポーネントの開発を導くことができます。同様に、FP 原則は機能コンポーネントに影響を与える可能性があります。言い換えれば、これらのプログラミング パラダイムのベスト プラクティスを React プロジェクトに直接適用できます。

それでは、関数コンポーネントと関数プログラミングの間にはどのような関係があるのでしょうか?この記事では、このトピックについて詳しく説明します。

プログラミング パラダイムと DSL

まず第一に、フレームワーク構文は本質的に、特定のドメインでの開発用にカスタマイズされた DSL (ドメイン固有言語) であることを明確にする必要があります。

たとえば、React はビューを構築するための DSL です。プラットフォームが異なれば、ビューの構築に使用するフレームワークも異なります。例:

• ウェブ側: ReactDOM
• ミニプログラム: タロウ
• ネイティブ開発: ByteDance の内部フレームワーク React Lynx

これらのフレームワークは通常、同じ DSL (React 構文) に従います。この DSL は特定のプログラミング パラダイムに関連付けられていませんが、ビューの開発に適した言語機能のセットとして見なす必要があります。

React DSL の一部として:

• 関数コンポーネントは OOP 原則を具体化できます。
• クラスコンポーネントは FP 原則を反映できます。

これらの原則が開発の観点から有益である限り、DSL に統合できます。

たとえば、WelcomeMessage と LogoutButton で構成される次の機能コンポーネント Header について考えてみましょう。これは、OOP における継承よりも合成の原則を示しています。

<code class="language-javascript">function Header(props) {
  return (
    <div>
      <WelcomeMessage name={props.name} />
      <LogoutButton onClick={props.onLogout} />
    </div>
  );
}</code>

同様に、クラス コンポーネント Cpn について考えてみましょう。ここでは、状態カウントは、突然変異 (this.state.count) によってではなく、不変データを指定して this.setState を呼び出すことによって更新されます。

<code class="language-javascript">class Cpn extends React.Component {
  // ...
  onClick() {
    const count = this.state.count;
    this.setState({ count: count + 1 });
  }
  render() {
    // ...
  }
}</code>

不変データの使用は FP の原則を反映しています。

したがって、React の機能を検討するときは、次の 3 つのステップを考慮する必要があります:

React の中核となる開発哲学は何ですか?
このアイデアを実装するために、さまざまなプログラミング パラダイムのどのようなアイデアが使用されましたか?
これらのアイデアは React にどのように適用できますか?

この思考プロセスを機能コンポーネントと関数プログラミングの関係に適用すると、次のことがわかります。

• 関数コンポーネントは実装 (ステップ 3) の結果です。
• 関数型プログラミングはプログラミング パラダイム (ステップ 2) です。

これはそれらの間の関係を定義します: 機能コンポーネントは、React で複数のプログラミング パラダイム (主に OOP と FP) を実装した結果であり、そのプロセスで FP からいくつかのアイデアを借用しています。

関数コンポーネントは、React の関数プログラミングの具体化としてのみ見るべきではありません。

機能部品の進化

前述の 3 段階の思考プロセスを使用して、機能コンポーネントの進化を探ってみましょう。 React の開発哲学は、次の式で最もよく表現されます:

<code class="language-javascript">function Header(props) {
  return (
    <div>
      <WelcomeMessage name={props.name} />
      <LogoutButton onClick={props.onLogout} />
    </div>
  );
}</code>

このコンセプトを実現するには、2 つの重要な要素が必要です:

• データスナップショット
• 関数マッピング

ここでは、FP からの不変データの方が、データ スナップショットのキャリアとして適しています。これが、React の状態が不変である理由です。状態の本質はスナップショットです。

関数マッピングのキャリアには特定の要件はありません。 React では、すべての更新が再レンダリングをトリガーし、レンダリング プロセス自体が関数マッピング プロセスとなります。入力は props と state、出力は JSX です。

対照的に、Vue コンポーネントは OOP 原則により準拠しています。次の Vue アプリ コンポーネントについて考えてみましょう:

<code class="language-javascript">class Cpn extends React.Component {
  // ...
  onClick() {
    const count = this.state.count;
    this.setState({ count: count + 1 });
  }
  render() {
    // ...
  }
}</code>

コンポーネントのセットアップ メソッドは、初期化中に 1 回だけ実行されます。後続の更新操作は、クロージャ内の同じデータに対して操作されます。これは、OOP のインスタンスの概念に対応します。

React は関数マッピングのキャリアに特別な要件を課していないため、クラス コンポーネントと関数コンポーネントの両方が実行可能なオプションです。

なぜ関数コンポーネントがクラスコンポーネントを置き換えたのですか?

多くの人は、フックを通じてロジックの再利用性を向上させることが、関数型コンポーネントがクラス コンポーネントよりも優れている主な理由であると信じています。ただし、デコレータベースのクラス開発モデルは、特に TypeScript と組み合わせた場合、ロジックを再利用する効果的な方法であることが証明されています。

本当の理由は、関数コンポーネントが UI = fn(snapshot) の概念をより適切に実装できるためです。

前に述べたように、式内のスナップショットは状態のスナップショットを表し、React では次のものが含まれます。

状態
小道具
コンテキスト

特定のコンポーネントの場合、式 UI = fn(snapshot) により、同じスナップショットが同じ出力 (JSX) を生成することが保証されます。ただし、状態の更新により、データのフェッチや DOM 操作などの副作用が引き起こされる場合もあります。

クラス コンポーネントでは、これらの副作用ロジックがさまざまなライフサイクル メソッドに分散されているため、React の制御が困難になります。ただし、関数コンポーネントでは:

副作用は useEffect に限定されます。 React は、新しい副作用を適用する前に、以前のレンダリングからの副作用が (useEffect の戻り値を介して) クリーンアップされることを保証します。
ref の伝播は、forwardRef などのメカニズムによって制限され、潜在的な影響が制限されます。
データフェッチの副作用は、Suspense によって次のように管理されます:

<code>UI = fn(snapshot);</code>

使用法:

<code class="language-javascript">const App = {
  setup(initialProps) {
    const count = reactive({ count: 0 });
    const add = () => { count.value++; };
    return { count, add };
  },
  template: "...omitted"
};</code>

つまり、機能コンポーネントは副作用を制御可能な状態に保ち、同じスナップショット入力に対して一貫した出力を提供します。これは FP の純粋関数の概念と一致しており、そのため React では関数コンポーネントが主流の選択肢となっています。

結論

関数コンポーネントは、React における関数型プログラミングの直接実装ではありませんが、React

UI = fn(snapshot) のコアコンセプトを実装するのに最も適切なキャリアです。 React はさまざまなプログラミング パラダイムからの優れたアイデアを統合していますが、その中で FP が最も大きな影響力を持っています。最終的には、あらゆるデザインの選択が全体的なアイデアに役立ちます。

---

私たち Leapcell は、Node.js プロジェクトをホストするための第一の選択肢です。

Leapcell は、Web ホスティング、非同期タスク、Redis 用の新世代サーバーレス プラットフォームです:

多言語サポート

• Node.js、Python、Go、または Rust を使用して開発します。

無制限のプロジェクトを無料でデプロイ

• 使用した分だけお支払いください。リクエストや手数料はかかりません。

比類のない費用対効果

• 従量課金制で、アイドル料金はかかりません。
• 例: 25 ドルは、平均応答時間 60 ミリ秒で 694 万件のリクエストをサポートします。

簡素化された開発者エクスペリエンス

• 直感的な UI、セットアップが簡単。
• 完全に自動化された CI/CD パイプラインと GitOps の統合。
• 実用的な洞察を得るリアルタイムのメトリクスとログ。

簡単な拡張性と高いパフォーマンス

• 自動スケーリングにより、高い同時実行性を簡単に処理できます。
• 運用上のオーバーヘッドがゼロ - 構築だけに集中できます。

詳しくはドキュメントをご覧ください。

X でフォローしてください: @LeapcellHQ

---

ブログを読む

以上が関数コンポーネントは関数プログラミングと同じですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。