LoginSignup
3

More than 5 years have passed since last update.

[React] Hooksを触ってみた

Posted at

Hooksとは

HooksはReactの新機能で、classコンポーネントでしか使えないstateの定義や更新、ライフサイクルメソッドをファンクションコンポーネントでも使えるようにしたものです。

公式 https://reactjs.org/docs/hooks-intro.html

色々なHooksがあります。
useState, useEffect, useContext, useRef, useReducerなど。
これらはそれぞれファンクションコンポーネントでクラスコンポーネントでしかできなかったことを可能にさせます。
今回はuseStateuseEffectについてみていきます。

useState

公式のサンプルです。

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

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

useStateを使うことによってstateに保存したいもの、またそれを更新するものを定義することができます。
useState(0)は保存したいものの初期値を入れることができます。今回では初期値0が入っています。
this.state.countみたいに長くならず、スマートに書くことができます。

useEffect

useEffectcomponentDidMountcomponentDidUpdateなどのメソッドをまとめたものになります。

import React, { useState, useEffect } from 'react';

const App = () => {
  const [ text, setText ] = useState('');

  useEffect(() => {
    console.log(text);
  }, [text]);

  return (
    <div>
      <button onClick={() => setText('One')}>buttonOne</button>
      <button onClick={() => setText('Two')}>buttonTwo</button>
    </div>
  );
}

export default App;

これはボタンを2つ用意してクリックするとstateに保存してその時のtextをconsole.log()するという簡単なサンプルです。
useEffectは第一引数に関数を定義してページを読み込んだ時にしてほしい処理を書きます。
そして第二引数にキーを設定すればそのキーが更新されるたびにuseEffectが動きます。
一回だけ呼び出したいのであれば第二引数のところを[text]から[]にすれば一回だけ実行されます。
これによって従来のcomponentDidMountcomponentDidUpdateが一つにまとまってくれています。

まとめ

Reactの新機能であるHooksを触ってみました。
useStateuseEffectにのみ触れましたが、他のHooksについても勉強していきたいです。
参考になれば幸いです。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3