Reactフック
バージョン16.8でフックがReactに追加されました。
フックを使用すると、関数コンポーネントは状態やその他のReact機能にアクセスできます。このため、クラスコンポーネントは通常不要になります。
フックは一般的にクラスコンポーネントを置き換えますが、Reactからクラスを削除する予定はありません。
フックとは何ですか？
フックを使用すると、状態やライフサイクルメソッドなどのReact機能に「フック」できます。
例：
これがフックの例です。意味がなくても心配しないでください。次のセクションで詳しく説明します。
import React, { useState } from "react";
import ReactDOM from "react-dom";
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>
</>
);
}
ReactDOM.render(<FavoriteColor />, document.getElementById('root'));
importからフックする必要がありreactます。
ここでは、useStateフックを使用してアプリケーションの状態を追跡しています。
状態とは、通常、追跡する必要のあるアプリケーションデータまたはプロパティを指します。
フックルール
フックには3つのルールがあります。
- フックは、React関数コンポーネント内でのみ呼び出すことができます。
- フックは、コンポーネントのトップレベルでのみ呼び出すことができます。
- フックは条件付きにすることはできません
注：フックはReactクラスコンポーネントでは機能しません。
カスタムフック
複数のコンポーネントで再利用する必要があるステートフルロジックがある場合は、独自のカスタムフックを作成できます。
カスタムフックのセクションで詳しく説明します。