React Hooksが正式リリースされたので公式マニュアルを読んでみた

最近Reactを触ってませんでしたが、React Hooksが正式リリースされたとのニュースがあったので、どんなものかとReact Hooksの公式マニュアルを読んでみました。

reactjs.org

要約

Reactではコンポーネントを作る方法として、関数による方法と、クラスによる方法があるのですが、関数による方法だと、コンポーネントに状態を記憶させることができませんでした。

React Hooksを使うと、関数コンポーネントと紐づいた状態記憶領域（state）を作成し、関数コンポーネントでも状態を記憶させることができるようになります。

これにより、関数コンポーネントがクラスコンポーネントと同等に扱えるようになります。

クラスコンポーネントは書き方があまりスッキリしていないため、Facebook的には、今後はよりスッキリ書ける、関数コンポーネントを推していきたいようです。

例＆解説

Aをクリックすると０から１づつ増える
Bをクリックすると１０から１０づつ増える

import React, { useState } from 'react';

function Example() {

  const [countA, setCountA] = useState(0);
  const [countB, setCountB] = useState(10);

  return (
    <div>
      <p>You clicked {countA} & {countB} times</p>
      <button onClick={() => setCountA(countA + 1)}>
        Click me A
      </button>
      <button onClick={() => setCountB(countB + 10)}>
        Click me B
      </button>
    </div>
  );
}

useState(<初期値>)がHook関数で、これを呼ぶとstateを保持する領域が確保され、[<現在のstate>, <stateを更新する関数>]が返される
<stateを更新する関数>を呼び出すと、確保された領域のstateが更新され、関数コンポーネントが再描画される。
関数コンポーネントの再描画の際に、再びuseState(<初期値>)が呼び出されることになるが、２回目以降は領域確保は行わず、既に確保した領域の現在のstateとその更新関数を返す
useState(<初期値>)による領域確保は呼ばれた順で行われるので、useState(<初期値>)はトップレベル、かつ、呼び出し順は固定で、動的に変えてはいけない