React フックの動作: useState から useContext までの詳細な分析-jsチュートリアル-php.cn

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

Patricia Arquette

リリース： 2024-12-05 01:41:10

オリジナル

710 人が閲覧しました

React Hooks in Action: In-depth Analysis from useState to 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 はデータ、ロード、およびエラーの値を変更するため、これらの状態変数を依存関係配列に追加する必要はありません。その変更によりコンポーネントの再レンダリングがトリガーされ、それによって新しいデータの取得が自動的に実行されるためです。 🎜>

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> ); }

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

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