Reactフックの長所と短所

序文

フックは React 16.8 の新機能です。これは完全にオプションであり、100% 下位互換性があります。これにより、機能コンポーネント、クラス コンポーネント、および状態管理、ライフサイクル フックなどの React のその他の機能を使用できるようになります。概念的には、React コンポーネントは常に関数に似ています。フックは、React の精神を犠牲にすることなく関数を採用します。

アドバンテージ：

1. コードが読みやすくなります。同じ関数のコード ロジックは、もともと異なるライフサイクル関数に分割されていたため、開発者が保守や反復処理を行うことが困難でした。React Hooks を使用すると、関数コードを集約して、読みやすく保守しやすくなります。たとえば、各ライフサイクルには関連のないロジックが含まれていることがよくあります。通常、componentDidMount と componentDidUpdate でデータを取得します。ただし、同じ componentDidMount には、イベント リスナーの設定など、他の多くのロジックも含まれている可能性があり、その場合は componentWillUnmount でクリアする必要があります。相互に関連しており、並行して変更する必要があるコードは分離され、完全に無関係なコードは同じメソッドに結合されます。これにより、簡単にバグや論理的な矛盾が発生する可能性があります。
2. コンポーネントツリーの階層が浅くなります。元のコードでは、コンポーネントの状態を再利用したり、機能を強化したりするために、HOC/レンダリングプロップなどの方法を使用することが多いため、コンポーネントツリーのレイヤー数とレンダリング数は間違いなく増加します。React DevToolsでReactアプリケーションを観察すると、プロバイダー、コンシューマー、高階コンポーネント、レンダリングプロップなどの抽象レイヤーで構成されるコンポーネントが「ネストされた地獄」を形成していることがわかります。 React Hooks では、これらの機能は強力なカスタム Hooks を通じて実装できます。
3. これがどこを指しているかを考える必要はありません。クラス コンポーネントでは、JavaScript でこれがどのように機能するかを理解する必要があります。

欠点:

1. レスポンシブな使用効果

関数コンポーネントを記述するときは、いくつかの記述習慣を変更する必要があります。コード内で useEffect と useCallback の「依存関係配列」がいつ変更されるかに注意する必要があります。場合によっては、useEffect は関数の不変性に依存し、この関数の不変性は別の関数の不変性に依存し、依存関係チェーンが形成されます。この依存関係チェーン内のノードが誤って変更されると、useEffect が誤ってトリガーされます。useEffect がべき等操作である場合、パフォーマンスの問題が発生する可能性があります。べき等ではない場合、ひどいことになります。

そのため、componentDidmount や componentDidUpdate と比較すると、useEffect はより大きな精神的負担をもたらします。

2. ステータスが同期されていない

関数は独立して実行され、各関数には独立したスコープがあります。関数の変数はランタイム スコープに格納されます。非同期操作がある場合、非同期コールバックの変数参照が以前のもの、つまり古いもの (ここではクロージャとして理解することもできます) になることがよくあります。たとえば、次の例をご覧ください。

React をインポートし、{useState} を "react" から取得します。
​
const カウンター = () => {
  const [カウンター、setCounter] = useState(0);
​
  定数 onAlertButtonClick = () => {
    タイムアウトを設定する(() => {
      alert("値: " + カウンター);
    }, 3000);
  };
​
  戻る （
    <div>
      <p>クリック回数は {counter} 回です。</p>
      <button onClick={() => setCounter(counter + 1)}>クリックしてください</button>
      <ボタン onClick={onAlertButtonClick}>
        3秒で価値を見せてください
      </ボタン>
    </div>
  );
};
​
デフォルトのカウンターをエクスポートします。

「3 秒後に値を表示」をクリックし、「クリックしてください」をクリックすると、カウンターの値が 0 から 1 に変わります。 3 秒後、タイマーがトリガーされますが、アラートには 0 (古い値) が表示されます。ただし、現在の状態は 1 にする必要があります。

クラス コンポーネントのプロパティとメソッドはインスタンスに格納され、呼び出しメソッドは this.state.xxx と this.method() であるため、この問題はクラス コンポーネントでは発生しません。毎回変更されていないインスタンスから値が取得されるため、古い参照の問題は発生しません。

実際、このフックの問題を解決するには、クラスのインスタンスを参照することもできます。 useRef によって返される不変の RefObject (現在のプロパティは変更可能) は状態を保存するために使用され、値へのアクセス方法は counter から counterRef.current に変更されます。次のように：

「react」から React、{useState、useRef、useEffect} をインポートします。
​
const カウンター = () => {
  const [カウンター、setCounter] = useState(0);
  定数counterRef = useRef(counter);
​
  定数 onAlertButtonClick = () => {
    タイムアウトを設定する(() => {
      alert("値: " + counterRef.current);
    }, 3000);
  };
​
  使用効果(() => {
    counterRef.current = カウンター;
  });
​
  戻る （
    <div>
      <p>クリック回数は {counter} 回です。</p>
      <button onClick={() => setCounter(counter + 1)}>クリックしてください</button>
      <ボタン onClick={onAlertButtonClick}>
        3秒で価値を見せてください
      </ボタン>
    </div>
  );
};
​
デフォルトのカウンターをエクスポートします。

結果は予想通りで、アラートの現在の値は 1 です。

Reactフックのよくある問題を回避する方法

• useEffect にあまり多くの依存関係を記述せず、これらの依存関係を複数の単一関数 useEffect に分割します。実際、これはソフトウェア設計の「単一責任モデル」に従います。
• 同期していない状態に関する問題が発生した場合は、関数にパラメータを手動で渡すことを検討してください。のように：

   // showCount のカウントは親スコープから取得されます const [count,setCount] = useState(xxx); 
   関数 showCount(){ console.log(count) } 

   // showCount のカウントはパラメータから取得されます const [count, setCount] = useState(xxx); 
   関数 showCount(c){ console.log(c) }

しかし、これで解決できるのは問題の一部だけであり、多くの場合、前述の useRef ソリューションを使用する必要があります。

3. eslint-plugin-react-hooks プラグインの警告に注意してください。

4. 複雑なビジネスの場合は、フックの代わりにコンポーネントを使用します。

以上がReactフックのメリットとデメリットの詳しい内容です。Reactフックのメリットとデメリットについてさらに詳しく知りたい方は、123WORDPRESS.COMの他の関連記事もぜひご覧ください！