Hooks の使用方法は React においてどういう風になりますか？

2年 ago
桜, 春樹
1 minute

ReactでHooksを使用するには、次のようにします：

  1. ‘react’からuseStateやuseEffectなどのHooks関数をインポートしてください。
  2. 関数コンポーネント内でHooks関数を呼び出し、変数に割り当てる：const [state, setState] = useState(initialValue);。ここでのuseStateは、ステータス変数と状態を更新する関数を定義するために使用されるHooks関数です。initialValueは初期値です。
  3. state変数を使用して現在の状態の値を取得し、setState関数を使用して状態の値を更新することができます。
  4. 関数コンポーネントの本体内で、useEffectを使用して副作用を処理することができます。例えば、データの購読やDOMの変更などです。 useEffectは、コールバック関数とオプションの依存配列を受け取り、コンポーネントのレンダリング後にコールバック関数を実行します。 依存配列は、配列内の依存項目が変更されたときにのみコールバック関数を再実行するよう指定するために使用されます。

Hooksは、関数コンポーネントのトップレベルでのみ呼び出すことができます。ループや条件文、またはネストされた関数内での呼び出しはできません。

Hooksを使用した例です。

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

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 在组件渲染后执行
    document.title = `You clicked ${count} times`;
  }, [count]); // 仅在count发生变化时才会重新执行

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

上記の例では、useStateを使用してcountという名前の状態変数とsetCountという更新関数を定義しました。そして、useEffectでは現在のクリック回数の情報をdocument.titleに表示し、[count]を依存関係として渡すことで、countが変化した場合にのみコールバック関数が再実行されるようにしました。

bannerAds