React フックの動作: useState から useContext までの詳細な分析

useState と useContext の詳細な分析

React Hooks は React コンポーネントの状態管理と関数の再利用を完全に変更し、関数コンポーネントがクラス コンポーネントの関数を持つことができるようにしました。

useState: 関数コンポーネントの状態管理

導入：

useState は React の最も基本的なフックで、これを使用すると関数コンポーネントに状態を追加できます。 useState は、ローカル状態を関数コンポーネントに追加するために React によって提供される組み込みフックです。初期値をパラメータとして受け取り、配列を返します。配列の最初の要素は現在の状態で、2 番目の要素は状態を更新する関数です。

import React, { useState } from 'react';

function Example() {
  // Initialization status count is 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useState によって返される setCount 関数は、状態を更新するために使用されます。 setCount が呼び出されるたびに、React はコンポーネントを再レンダリングし、新しい状態値に基づいて仮想 DOM を再生成し、その後効率的な DOM diff を実行して、最後に実際の DOM を更新します。

についての深い理解

useState の仕組み、状態更新の非同期性、およびパフォーマンスへの影響。

• 状態の更新は非同期です。つまり、setCount が同じイベント ループ内で複数回呼び出された場合、React は最後の値のみを使用します。

• useState は、複雑なオブジェクトの浅い比較をサポートしていません。以前の状態に基づいて状態を更新する必要がある場合は、setCount(prevCount => prevCount 1) などの setCount の関数形式を使用できます。

高度なアプリケーション

useEffect と組み合わせて、データの取得やクリーンアップなどの副作用を処理します。

import React, { useState, useEffect } from 'react';

function Example() {
  // Initialization state
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Data acquisition function
  const fetchData = async () => {
    try {
      setLoading(true);
      const response = await fetch('https://api.example.com/data');
      const json = await response.json();
      setData(json);
      setError(null);
    } catch (err) {
      setError(err.message);
      setData(null);
    } finally {
      setLoading(false);
    }
  };

  // useEffect monitors data changes and executes when rendering for the first time
  useEffect(() => {
    fetchData();
  }, []);

  // Rendering the UI
  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return (
    <div>
      <h1>Data Retrieved Successfully</h1>
      <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}

); } export default Example;

ログイン後にコピー

コード例の解釈: まず、useState を使用して 3 つの状態変数を作成します。data は取得したデータを保存し、loading はデータがロード中かどうかを示し、error は考えられるエラー情報を保存します。

次に、非同期データ取得用の fetchData 関数を定義します。この関数には、エラー処理と状態更新ロジックが含まれています。

次にuseEffectを使ってデータ取得を行います。 useEffect の 2 番目のパラメーターは依存関係配列です。ここで空の配列を渡すことは、コンポーネントがマウントされた後に 1 回だけ実行されること、つまり、最初にレンダリングされたときにデータが取得されることを意味します。これにより、状態が更新されるたびにデータが再取得されるのではなく、コンポーネントのロード時にデータが取得されるようになります。

useEffect のコールバック関数で、fetchData 関数を呼び出します。 fetchData はデータ、ロード、およびエラーの値を変更するため、これらの状態変数を依存関係配列に追加する必要はありません。その変更によりコンポーネントの再レンダリングがトリガーされ、それによって新しいデータの取得が自動的に実行されるためです。 🎜>

useContext: 共有状態のコンテキスト ソリューション

導入

useContext は、明示的に props を渡さずにコンポーネント間でデータを渡すために使用されます。

まず、コンテキストを作成する必要があります:

import React, { useState } from 'react';

function Example() {
  // Initialization status count is 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

その後、アセンブリ内で useContext を使用します:

import React, { useContext } from 'react'; import { ThemeContext } から './ThemeContext'; 関数 Button() { const テーマ = useContext(ThemeContext); 戻る （

  
  
  深い理解
<h4>

</h4>

useContext を使用するコンポーネントは、コンポーネントの他の状態が変更されていない場合でも、プロバイダーが更新されると再レンダリングされます。
複数のコンポーネントが同じコンテキストをサブスクライブしている場合、プロバイダーの状態が変化するとそれらはすべて再レンダリングされるため、不必要なパフォーマンスのオーバーヘッドが発生する可能性があります。これは、React.memo や shouldComponentUpdate などの戦略を通じて最適化できます。
悪用を防ぐため、複数のレベルで状態を共有する必要がある場合にのみ Context を使用してください。それ以外の場合は、props を優先する必要があります。

useState と useContext を組み合わせたアプリケーション

useState と useContext を組み合わせると、テーマ切り替え機能を備えたカウンター アプリケーションを作成できます。

import React, { createContext, useState, useContext } from 'react'; // ThemeContextを作成する const ThemeContext = createContext('light'); 関数 ThemeProvider({ 子 }) { const [テーマ, setTheme] = useState('light'); 戻る （ {子供たち} <ボタン onClick={() => setTheme(テーマ === 'ライト' ? 'ダーク' : 'ライト')}> テーマの切り替え ); } 関数 Counter() { const テーマ = useContext(ThemeContext); const [カウント, setCount] = useState(0); 戻る （

コード例の説明: ThemeProvider は useState を使用してテーマの状態を管理し、Counter コンポーネントは useContext を通じてテーマをサブスクライブし、useState を使用してカウンタの状態を管理します。テーマが切り替わると、Counter が再レンダリングされ、対応するテーマの色が表示されます。<p>


          </p>

            
        

以上がReact フックの動作: useState から useContext までの詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。