MENU

React ステートフックについて分かったこと

ReactをこちらのQiitaの記事で学んでいます。まずはコードを引用します。

import { useState } from 'react';
import { List } from "./List";

function App() {
  const [description, setDescription] = useState('クリック前の表示');

  const changeDescription = () => { // 追加
    setDescription('クリック後の表示です。')
  }

  return (
    <div>
      { description }
      <List title="取り扱い言語一覧"/>
      <button onClick={changeDescription}>ボタン</button> // 追加
    </div>
  );
}

export default App;

const [description, setDescription] = useState('クリック前の表示'); のところが、最初理解できませんでした。記事の中での説明では、以下の通りです。

今回は下記で description という state を定義しています。 useState は初期値を引数に持ち、
state と state を変更する関数を返り値で返します。

自分の理解では、
・description: state、コンポーネント内部で変更できる変数の名前。任意に設定できる。
・setDescription: descriptionを変更できるメソッドの名前。任意に設定できる。
・useState: descriptionの初期値を設定するメソッド。固定の名前。
どうして配列に代入するのかは、分からないのですが、そういう書き方なんだと納得することにしました。
公式のリファレンスのコード、および説明によると、この書き方が分かり易いためだそうです。

この JavaScript の構文は “分割代入 (destructuring)” と呼ばれています。これが意味するところは、fruit と setFruit という名前の 2 つの変数を作って、useState から返される値のうち 1 つ目を fruit に、2 つ目を setFruit に代入する、ということです。これは以下のコードと等価です:

  var fruitStateVariable = useState('banana'); // Returns a pair
  var fruit = fruitStateVariable[0]; // First item in a pair
  var setFruit = fruitStateVariable[1]; // Second item in a pair
useState で state 変数を宣言する際、ペア、つまり 2 つの要素を含んだ配列が返されます。1 つ目の要素は state の現在の値、2 つ目の要素はそれを更新するための関数です。これらには特定の意味があるので、アクセスするのに [0] や [1] を使うのではちょっと分かりづらくなります。だから代わりに分割代入を使うというわけです。

任意に設定できる部分と、そうでないところがよく分かる例を引用します。

function ExampleWithManyStates() {
  // Declare multiple state variables!
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);

stateに設定できるのが、文字列や数値、配列、オブジェクトなど型を選ばないことも分かりました。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次
閉じる