コンポーネントを純粋に保つことは、React と関數(shù)型プログラミングの基本原則です。ここでは、React コンポーネントの純度を維持するためのメリットや戦略など、コンポーネントの純度の概念をさらに詳しく説明します。

React でコンポーネントを純粋に保つ

純粋関數(shù)とは何ですか?

純粋関數(shù)は、次のような関數(shù)です。

1. 決定的: 同じ入力が與えられると、常に同じ出力が生成されます。
2. 副作用なし: 外部狀態(tài)の変更や外部との対話 (API 呼び出しの実行、DOM の操作など) などの副作用は発生しません。

純粋なコンポーネントを使用する理由

1. 予測(cè)可能性: 純粋なコンポーネントは一貫して動(dòng)作します。その出力を信頼できるため、アプリケーションに関する推論が簡(jiǎn)素化されます。

2. テストが簡(jiǎn)単: 純粋なコンポーネントは予測(cè)可能で副作用がないため、テストが簡(jiǎn)単です。外部狀態(tài)の変化を心配することなく、入力プロパティに基づいて出力を直接テストできます。

3. パフォーマンスの最適化: 純粋なコンポーネントはレンダリングの最適化に役立ちます。 React は、プロパティの変更に基づいてコンポーネントを再レンダリングする必要があるかどうかを効率的に判斷できます。

4. 保守性: コードベースが拡大するにつれて、純粋なコンポーネントの保守がより簡(jiǎn)単になります。隠れた依存関係を持たずに機(jī)能をカプセル化し、デバッグとリファクタリングを容易にします。

5. 再利用: 純粋なコンポーネントは外部狀態(tài)に依存しないため、再利用可能性が高くなります。さまざまなコンテキストで簡(jiǎn)単に使用できます。

コンポーネントを純粋に保つ方法

コンポーネントを確実に純粋な狀態(tài)に保つための戦略をいくつか示します:

1. 副作用を避ける:
   • プロパティやグローバル狀態(tài)を直接変更しないでください。
   • レンダリング メソッド內(nèi)の非同期操作 (API 呼び出し、タイマーなど) を避けてください。

   const PureComponent = ({ count }) => {
     // Pure function: does not cause side effects
     return <div>{count}</div>;
   };

1. React.memo を使用する:
   • 関數(shù)コンポーネントを React.memo でラップして、プロパティが変更されていない場(chǎng)合に不要な再レンダリングを防ぎます。

   const PureGreeting = React.memo(({ name }) => {
     return <h1>Hello, {name}!</h1>;
   });

1. プロップの構(gòu)造を解除:
   • コンポーネントのパラメータリスト內(nèi)のプロップを構(gòu)造化して、コンポーネントの構(gòu)造をクリーンで焦點(diǎn)を絞った狀態(tài)に保ちます。

   const PureButton = ({ label, onClick }) => {
     return <button onClick={onClick}>{label}</button>;
   };

1. 狀態(tài)をリフトアップ:
   • 親コンポーネントで狀態(tài)を管理し、必要なデータとイベント ハンドラーを子コンポーネントに渡します。これにより、子コンポーネントは純粋に機(jī)能し続けます。

   const ParentComponent = () => {
     const [count, setCount] = useState(0);

     return <PureCounter count={count} setCount={setCount} />;
   };

1. レンダリングでインライン関數(shù)を避ける:
   • 関數(shù)を render メソッド內(nèi)でインラインで定義する代わりに、関數(shù)を外部で定義します。これにより、レンダリングごとに新しい関數(shù)インスタンスが作成されなくなり、不必要な再レンダリングが発生する可能性があります。

   const PureCounter = React.memo(({ count, setCount }) => {
     return <button onClick={() => setCount(count + 1)}>Increment</button>;
   });

1. 狀態(tài)を直接変更しないようにします:
   • 既存の狀態(tài)を直接変更するのではなく、新しい狀態(tài)を返すメソッドを使用します。これは不変性の原則と一致します。

   const handleAddItem = (item) => {
     setItems((prevItems) => [...prevItems, item]); // Pure approach
   };

純粋なコンポーネントの例

これらの原則に従った純粋な機(jī)能コンポーネントの完全な例を次に示します。

import React, { useState } from 'react';

const PureCounter = React.memo(({ count, onIncrement }) => {
  console.log('PureCounter Rendered');
  return <button onClick={onIncrement}>Count: {count}</button>;
});

const App = () => {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount((prevCount) => prevCount + 1);
  };

  return (
    <div>
      <h1>Pure Component Example</h1>
      <PureCounter count={count} onIncrement={handleIncrement} />
    </div>
  );
};

export default App;

結(jié)論

React でコンポーネントを純粋に保つと、開(kāi)発が簡(jiǎn)素化されるだけでなく、パフォーマンスと保守性も向上します。純粋関數(shù)の原則に従うことで、予測(cè)可能で再利用可能でテストが簡(jiǎn)単なコンポーネントを作成できます。副作用の回避、React.memo の使用、狀態(tài)の適切な管理などのベスト プラクティスに従うことは、堅(jiān)牢で販売可能なアプリケーションを構(gòu)築するのに役立ちます。

以上がReact.js の純粋なコンポーネントの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。