Hooksとは
HooksはReactの新機能で、classコンポーネントでしか使えないstateの定義や更新、ライフサイクルメソッドをファンクションコンポーネントでも使えるようにしたものです。
公式 https://reactjs.org/docs/hooks-intro.html
色々なHooksがあります。
useState
, useEffect
, useContext
, useRef
, useReducer
など。
これらはそれぞれファンクションコンポーネントでクラスコンポーネントでしかできなかったことを可能にさせます。
今回はuseState
とuseEffect
についてみていきます。
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
useEffect
はcomponentDidMount
やcomponentDidUpdate
などのメソッドをまとめたものになります。
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]
から[]
にすれば一回だけ実行されます。
これによって従来のcomponentDidMount
やcomponentDidUpdate
が一つにまとまってくれています。
まとめ
Reactの新機能であるHooksを触ってみました。
useState
とuseEffect
にのみ触れましたが、他のHooksについても勉強していきたいです。
参考になれば幸いです。