新しいことにはウェルカム

技術 | 電子工作 | ガジェット | ゲーム のメモ書き

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

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

reactjs.org

要約

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

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

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

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

例&解説

  • Aをクリックすると0から1づつ増える
  • Bをクリックすると10から10づつ増える
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(<初期値>)が呼び出されることになるが、2回目以降は領域確保は行わず、既に確保した領域の現在のstateとその更新関数を返す
  • useState(<初期値>)による領域確保は呼ばれた順で行われるので、useState(<初期値>)はトップレベル、かつ、呼び出し順は固定で、動的に変えてはいけない

感想

普段React+Reduxを使っているのですが、ちょっとした事をするのにも、とにかくコーディング量が多いのが悩みの種でした。

React Hooksはそのあたりを解決してくれる機能かと期待したのですが、Reduxを使うとコンポーネントのstateを使うことはほとんどないので、あまり関係無いかなぁと思いました。