React フック
フックはバージョン16.8でReact に追加されました。
フックを使用すると、関数コンポーネントがステートやその他のReact機能にアクセスできるようになる。このため、クラス・コンポーネントは不要になります。
通常、フックはクラス・コンポーネントを置き換えますが、Reactからクラスを削除する予定はありません。
フックとは？
フックを使用すると、状態やライフサイクルメソッドなどの React 機能に「フック」できます。
例：
これはフックの例です。今は意味が分からなくても問題ありません。詳細については、次のセクションを参照して下さい。
import React, { useState } from "react";
import ReactDOM from "react-dom/client";
function FavoriteColor() {
const [color, setColor] = useState("red");
return (
<>
<h1>My favorite color is {color}!</h1>
<button
type="button"
onClick={() => setColor("blue")}
>Blue</button>
<button
type="button"
onClick={() => setColor("red")}
>Red</button>
<button
type="button"
onClick={() => setColor("pink")}
>Pink</button>
<button
type="button"
onClick={() => setColor("green")}
>Green</button>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FavoriteColor />);
reactからフックをimportする必要があります。
ここでは、useStateフックを使用してアプリケーションの状態を追跡しています。
状態は通常、追跡する必要があるアプリケーションデータまたはプロパティを指します。
フックのルール
フックには3つのルールがあります。
フックはReact関数コンポーネント内でのみ呼び出すことができます。フックはコンポーネントの最上位でのみ呼び出すことができます。フックを条件付きにすることはできません
注：フックはReactクラスコンポーネントでは機能しません。
カスタムフック
複数のコンポーネントで再利用する必要があるステートフル ロジックがある場合は、独自のカスタムフックを作成できます。
詳細については、カスタムフックセクションを参照して下さい。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。