第2回 世界一やさしいReact 「hooksについて(超基本編)」

hooksって？

Reactを勉強しているとhooksという単語をたくさん見ると思います。
フック (hook) は React 16.8 で追加された新機能です。state などの React の機能を、クラスを書かずに使えるようになります。(公式より)
どういうことかというと、componentの書き方は二種類存在しています。

• Class Component
• Functional Component

以前はClass ComponentでないとState(react独自の機能)等が利用できませんでした。
ただ16.8以降はFunctional ComponentでState等が利用できるようになりました。
それがhooksです。
Functional Componentの利点として書き方がシンプルなことです。
記述量もかなり減るので、今から学習する人はFunctional Componentを覚えたほうがいいと思います。

hooksはReactを学習するうえでとても大事なので今回は詳しい動作云々よりイメージを掴んでもらうために、代表的なものを簡単に説明していこうかなって思います。
専門的なことはチュートリアルや、他のサイトを見てください。
ここではあくまでイメージや、こんなんですよっていう紹介程度です。

useState

component内で使いたい動的に変化する値がある場合に主に利用します。
表示、非表示の切り替えのフラグやなにかの状態を持つときに便利です。
stateの値が変更されるとレンダリングされます。　

// ボタンクリック時にstateの値を+1するcomponentの例
const TestComponent = () => {
  // 宣言 count: 現在の値を保持する変数 setCount: countの値を更新する関数
  const [count, setCount] = React.useState<number>(0);

  // ボタンクリック時にtestの値を1ずつ足していく
  const clickEvent = () => {
    setCount(count+ 1);
　  console.log(count); // この時点では+1された値ではないので注意！！
  };

  return(
    <button onClick={clickEvent}>
      {'testの値は' + count}
    </button>
  );
};

useEffect

componentの初回レンダリング後に実行したい処理や、特定の値が変更されたときになにか処理を行いたいときによく使います。

// ボタンクリック時にstateの値を+1するcomponentの例
const TestComponent = () => {

  const [count, setCount] = React.useState<number>(0);

  React.useEffect(() => {
    // ここは第一引数で実行したい処理を書く
　　console.log('初回のみ実行されます');
  }, []); // []内は第二引数で変更を検知したい値を書く→空でも大丈夫（空の場合は初回のみ実行になる）

  // countの値変更時に実行される
  React.useEffect(() => {
    if (0 < count) {
      console.log('buttonが押される度に呼ばれます。現在値：' + count);
    }
  }, [count]);

  const clickEvent = () => {
    setCount(count+ 1);
  };

  return(
    <button onClick={clickEvent}>
      {'countの値は' + count}
    </button>
  );
};

最後に

次回はuseMemo, useContext, useCallbackについて書こうと思っています。