React フックを理解する: 初心者ガイド

「React フックを理解する: 初心者向けガイド」

React フックは、React に導入された最も強力な機能の 1 つです。これらにより、機能コンポーネントの状態と副作用の管理が簡素化され、コードがよりクリーンで読みやすくなります。この投稿では、よく使用される 3 つのフック、useState、useEffect、useContext について説明します。

---

1. useState – 機能コンポーネントの状態の管理

useState フックを使用すると、機能コンポーネントをクラス コンポーネントに変換せずに状態を追加できます。

例:

const Counter = () => {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <p>Current Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

仕組み:

• useState は、現在の状態とそれを更新する関数の 2 つの値を含む配列を返します。
• 数値、文字列、オブジェクト、配列など、あらゆるタイプのデータを管理するために使用できます。

---

2. useEffect – 副作用の管理

useEffect フックは、API 呼び出し、サブスクリプション、DOM 操作などの副作用の処理に最適です。

例:

const DataFetcher = () => {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // Empty array ensures this runs only once on mount

  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
};

キーポイント:

• 2 番目の引数 (依存関係配列) は、いつエフェクトを実行するかを決定します。
• コンポーネントのマウント後にエフェクトを 1 回だけ実行するには、空の配列 ([]) を使用します。

---

3. useContext – グローバル状態の管理

useContext フックを使用すると、コンポーネント ツリーに props を渡すことなく、グローバル データへのアクセスが簡素化されます。

例:

const ThemeContext = React.createContext();

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = React.useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

const ThemeToggler = () => {
  const { theme, setTheme } = React.useContext(ThemeContext);

  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      Toggle Theme: {theme}
    </button>
  );
};

// Usage in App
const App = () => (
  <ThemeProvider>
    <ThemeToggler />
  </ThemeProvider>
);

useContext を使用する理由

• 複数のレベルのコンポーネントにプロップを渡す「プロップ ドリル」を回避します。
• グローバル テーマ、ユーザー データ、アプリ設定の管理に最適です。

---

結論

React Hooks は、機能コンポーネントをより強力かつ柔軟にします。 useState、useEffect、useContext を使用すると、クラス コンポーネントに依存せずに状態、副作用、グローバル データを簡単に管理できます。

フックは React 開発者にとって必須の学習です。実験を開始して、フックが開発プロセスをいかに簡素化するかを発見してください。

あなたのお気に入りの React Hook は何ですか?コメント欄でお知らせください!

以上がReact フックを理解する: 初心者ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。