React Hooks 入門してみた

React Hooksの知識が必要となりましたので、Reactのドキュメントを参考にサンプルプログラムを作成しました。

React Hooksとは

React 16.8で追加された機能で、props、stateなどのReact機能をクラスコンポーネントを書かずに使えます。 つまり関数コンポーネントでReactの機能が使用できます。 Reactドキュメントのフックの導入にある通り、 いわゆるuseStateという関数が最初のフック(Hook)になります。

フックを試してみる。

ドキュメントをもとにサンプルプログラムを作成しました。 create-react-appコマンドを実行後、App.jsを以下の通り作成しました。

import React,{ useState } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <header className="App-header">
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
          Click me
        </button>
      </header>
    </div>
  );
}

export default App;

ボタンをクリックするとカウントされる画面が表示されました。

以下はReact公式ドキュメントの引用です。

関数コンポーネントの中でローカルなstateを使うために呼び出しています。 このstateは以降の再レンダーの間もReactによって保持されます。 useStateは現在のstateの値と、それを更新するための関数とをペアで返します。 この関数はイベントハンドラーやその他の場所から呼び出すことができます。 クラスコンポーネントにおけるthis.setStateと似ていますが、新しいstateが古いものとマージされないという違いがあります。 フック早わかり – React

useStateの唯一の引数はstateの初期値です。 フック早わかり – React

複数のフックを使用する。

クラスコンポーネントの場合はthis.state、関数コンポーネントはuseStateを使います。 useState(0)の場合、stateの値は0になり、setCount関数はstateを更新するために使用します。 また１つのコンポーネント内で2回以上のフックを使用することが可能です。

import React,{ useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
  const [second_count, setSecondCount] = useState(0);
  const [second_text, setCountText] = useState({text:"Help! Push Second Button"});

  const onclickFunction = () => {
    setSecondCount(second_count + 1);
    setCountText({text:"Thank you for putting button!!!!"})
  }

  return (
  <div className="App">
      <header className="App-header">
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
          Click me
        </button>
        <p>
          {second_text.text}.
          Yout clicked {second_count} times
        </p>
        <button onClick={onclickFunction}>
          Click me.Second button
        </button>
      </header>
    </div>
  );
}

export default App;

参考資料

フックの導入 – React

フック API リファレンス – React