適当なHooks入門【useState編】

概要

Reactで開発するにあたってHooksちゅう新しい機能を使うので、公式ドキュメントで勉強したことを投稿していこうと思います。

公式ドキュメント

Hooksとは？

state などの React の機能を、クラスを書かずに使えるようになります。

つまり関数コンポーネントで従来のクラスのように、Stateの管理やらライフサイクルっぽいことができる機能みたいです。

ステートフックをやってみる

まずはStateの管理をええ感じにしてくれる、useStateちゅうやつからやってみます。

import React, { useState } from 'react';

// stateの初期値
const initialState = 0;

function Example() {
  // 呼び出し
  const [count, setCount] = useState(initialState);

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

useState は現在の stateの値と、それを更新するための関数をペアにして返します。

つまりuseStateは引数の値のGetterとSetterを生成してくれる便利関数みたいな感じなんかな？
ちなみにuseStateの引数(state)はオブジェクトでなくてもええみたいです。

function Example() {
  // どっちもOK
  const [count, setCount] = useState(0);
  const [user, setUser] = useState({name: "くいだおれ太郎"});

  // stateの更新
  const updateState = () => {
    setCount(1);
    setUser({name: "ビリケンさん"});
  }

  return (
    <div>
      <p>count: {count} </p>
      <p>user: {user.name} </p>
      <button onClick={() => updateState()}>
        UPDATE
      </button>
    </div>
  );
}

フックのルール

・ フックは関数のトップレベルのみで呼び出してください。ループや条件分岐やネストした関数の中でフックを呼び出さないでください。

・ フックは React の関数コンポーネントの内部のみで呼び出してください。通常の JavaScript 関数内では呼び出さないでください（ただしフックを呼び出していい場所がもう 1 カ所だけあります — 自分のカスタムフックの中です。これについてはすぐ後で学びます）。

つまり関数コンポーネントのいっちゃん上で使ってね。と言うことみたいや

ざっくりまとめ

1. useStateは引数にとったstateの値と、それを更新するための関数を返す便利な関数なんやで
2. 引数にとるstateはオブジェクト出なくてもええんやで
3. 関数コンポーネントの内部のみ、しかもいっちゃん上でつこてや

おわりに

初投稿で文章も内容も適当ですが、こんな感じで投稿を続けていこうと思います。