遅かれながらReact Hooksを使い始めた。

ReactのHooksがReactのバージョン16.8から使えるようになりましたね.

巷ではもう常識レベルで使われているとのことを聞いたため、ReactのHooksを使い始めました.

30分前からHooksを使い始めたので至らないところもあると思いますが理解したことをまとめたいと思います.

基本的に得た情報はReactの公式ドキュメントを元に得たものなので詳しく知りたい方はこちら.

Hooks at a Glance – React

取り敢えずReactのHooksで一つコンポーネントを作ってみましたので. それを元に解説をしていきたいと思います.

こちらは公式のサンプルに少し手を加えたものです.

import React, { useState } from 'react';

import Layout from '../components/Layout'

function Example() {

// Declare a new state variable, which we'll call "count"

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

return (

<Layout>

<p>You clicked {count} times</p>

<button onClick={() => setCount(count + 1)}>

Click me

</button>

</Layout>

);

}

export default Example

こちらをブラウザ上に描画すると"You clicked 0 times"と表示されていることがわかります.

useStateの引数として0を与えているのですが、この0がuseStateを実行した際に帰ってくる配列の1番目の要素の中身となっております. setCountが新しい値を生み出すための関数となっており、コード上の setCount(count + 1)の部分となっております。

今回の例ではsetCountに1が入ることとなります。そして、useStateの返り値の2つ目の要素である. setCountが呼ばれると、その返り値を使用してこの関数が再描画されるようです.(まだReactのライフサイクルのうちどこが実行されるかは調べておりません）

ひとまず、Reactを今まで触っていた人が新たにHooksを使う上で抑える必要があることはこのあたりのことだと思います。

- useStateの返り値が配列となっており、要素の2つ目の実行結果によって再描画をする

これからuseEffectとは何かを使ってみたいと思います。