ReactuseStateフック

React useStateHookを使用すると、関数コンポーネントの状態を追跡できます。

状態とは、通常、アプリケーションで追跡する必要のあるデータまたはプロパティを指します。

輸入 useState

フックを使用するには、最初にフックをコンポーネントに組み込むuseState必要があります。import

import { useState } from "react";

名前付きエクスポートであるため、useStateから破壊していることに注意してください。react

初期化useState

useState関数コンポーネントを呼び出すことにより、状態を初期化します。

useState初期状態を受け入れ、2つの値を返します。

• 現在の状態。
• 状態を更新する関数。

import { useState } from "react";

function FavoriteColor() {
  const [color, setColor] = useState("");
}

ここでも、からの戻り値を破棄していることに注意してくださいuseState。

最初の値color、、は現在の状態です。

2番目の値、setColorは、状態を更新するために使用される関数です。

最後に、初期状態を空の文字列に設定します。useState("")

状態を読む

これで、コンポーネントのどこにでも状態を含めることができます。

import { useState } from "react";
import ReactDOM from "react-dom";

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return <h1>My favorite color is {color}!</h1>
}

ReactDOM.render(<FavoriteColor />, document.getElementById('root'));

状態の更新

状態を更新するには、状態アップデーター関数を使用します。

import { useState } from "react";
import ReactDOM from "react-dom";

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>My favorite color is {color}!</h1>
      <button
        type="button"
        onClick={() => setColor("blue")}
      >Blue</button>
    </>
  )
}

ReactDOM.render(<FavoriteColor />, document.getElementById('root'));

州が保持できるもの

useStateフックを使用して、文字列、数値、ブール値、配列、オブジェクト、およびこれらの任意の組み合わせを追跡できます。

個々の値を追跡するために、複数の状態フックを作成できます。

import { useState } from "react";
import ReactDOM from "react-dom";

function Car() {
  const [brand, setBrand] = useState("Ford");
  const [model, setModel] = useState("Mustang");
  const [year, setYear] = useState("1964");
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>My {brand}</h1>
      <p>
        It is a {color} {model} from {year}.
      </p>
    </>
  )
}

ReactDOM.render(<Car />, document.getElementById('root'));

または、1つの状態を使用して、代わりにオブジェクトを含めることもできます。

import { useState } from "react";
import ReactDOM from "react-dom";

function Car() {
  const [car, setCar] = useState({
    brand: "Ford",
    model: "Mustang",
    year: "1964",
    color: "red"
  });

  return (
    <>
      <h1>My {car.brand}</h1>
      <p>
        It is a {car.color} {car.model} from {car.year}.
      </p>
    </>
  )
}

ReactDOM.render(<Car />, document.getElementById('root'));

状態のオブジェクトと配列の更新

状態が更新されると、状態全体が上書きされます。

車の色だけを更新したい場合はどうなりますか？

だけ電話した場合setCar({color: "blue"})、これにより、ブランド、モデル、および年が州から削除されます。

JavaScriptのspread演算子を使用して支援することができます。

import { useState } from "react";
import ReactDOM from "react-dom";

function Car() {
  const [car, setCar] = useState({
    brand: "Ford",
    model: "Mustang",
    year: "1964",
    color: "red"
  });

  const updateColor = () => {
    setCar(previousState => {
      return { ...previousState, color: "blue" }
    });
  }

  return (
    <>
      <h1>My {car.brand}</h1>
      <p>
        It is a {car.color} {car.model} from {car.year}.
      </p>
      <button
        type="button"
        onClick={updateColor}
      >Blue</button>
    </>
  )
}

ReactDOM.render(<Car />, document.getElementById('root'));

状態の現在の値が必要なため、関数を関数に渡しsetCarます。この関数は前の値を受け取ります。

次に、オブジェクトを返し、previousState色だけを広げて上書きします。

import { useState } from "react";

function KeepCount() {
  const [, ] = useState(0);
}