トップのフック

React フックとは何ですか?
フックは、機能コンポーネントに状態と副作用を管理する機能を提供します。これらは React v16.8 で最初に導入され、それ以来さまざまなフックが追加されてきました。今日は私が最もよく使っているトップ 3 のフックについて話します。

**

1. useState フック ** コンポーネント内に状態変数を追加できます。

const [age, setAge] = useState(18)

上記は、このフックの定義方法の簡単な例です。
useState フックは、定義された変数 (age) の初期状態としてパラメーター (18) を受け取り、2 つの値の配列を提供します:

1. (age) 現在の状態を返します
2. (setAge) これはセッター関数です。 状態を更新できます。

セッター関数の仕組みは次のとおりです:

関数incrementAge(){
setAge(a => a + 1)
}

この関数が呼び出されるたびに、setter 関数は最後の状態に基づいて状態を更新します。

2. useEffect フック
これにより、コンポーネントを DOM やネットワークなどの外部システムと同期できます。

useEffect(() => {
const connection = createConnection(serverUrl, roomId);
connection.connect();
return() => {
connection.disconnect();
};
}, [サーバーURL, ルームID]);

useEffect フックは、関数 と 依存関係配列 の 2 つのパラメーターを取ります。この関数は、関数の後にある依存関係配列内の変数がその値または状態を変更した場合にのみ実行されます。依存関係配列が空の場合、コンポーネントがレンダリングされるたびに関数が実行されます。

これらは React の他の多くのフックのうちの 2 つにすぎません。これらは最も一般的で、さまざまな状況で最も役立ちます。

以上がトップのフックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。