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 id="Data-Retrieved-Successfully">Data Retrieved Successfully</h1>
      <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}