React useStateHook

React useStateHook cho phép chúng ta theo dõi trạng thái trong một thành phần chức năng.

State thường đề cập đến dữ liệu hoặc phần mềm cần được theo dõi trong một ứng dụng.

Nhập khẩuuseState

Để sử dụng useStateHook, trước tiên chúng ta cần đưa importnó vào thành phần của chúng ta.

import { useState } from "react";

Lưu ý rằng chúng tôi đang hủy cấu trúc useStatetừ reactvì nó là một xuất khẩu được đặt tên.

Khởi tạouseState

Chúng tôi khởi tạo trạng thái của mình bằng cách gọi useStatetrong thành phần hàm của chúng tôi.

useStatechấp nhận một trạng thái ban đầu và trả về hai giá trị:

• Tình trạng hiện tại.
• Một chức năng cập nhật trạng thái.

import { useState } from "react";

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

Lưu ý rằng một lần nữa, chúng tôi đang hủy cấu trúc các giá trị trả về từ useState.

Giá trị đầu tiên color, là trạng thái hiện tại của chúng ta.

Giá trị thứ hai setColor, là fuction được sử dụng để cập nhật trạng thái của chúng ta.

Cuối cùng, chúng tôi đặt trạng thái ban đầu thành một chuỗi rỗng:useState("")

Đọc trạng thái

Bây giờ chúng tôi có thể bao gồm trạng thái của chúng tôi ở bất kỳ đâu trong thành phần của chúng tôi.

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'));

Cập nhật trạng thái

Để cập nhật trạng thái của chúng tôi, chúng tôi sử dụng chức năng trình cập nhật trạng thái của chúng tôi.

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'));

Nhà nước có thể nắm giữ những gì

Hook có thể được sử dụng để theo dõi các chuỗi, số useState, boolean, mảng, đối tượng và bất kỳ sự kết hợp nào của chúng!

Chúng tôi có thể tạo nhiều Hooks trạng thái để theo dõi các giá trị riêng lẻ.

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'));

Hoặc, chúng ta có thể chỉ sử dụng một trạng thái và thay vào đó bao gồm một đối tượng!

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'));

Cập nhật các đối tượng và mảng ở trạng thái

Khi trạng thái được cập nhật, toàn bộ trạng thái sẽ bị ghi đè.

Điều gì sẽ xảy ra nếu chúng ta chỉ muốn cập nhật màu sắc của chiếc xe của mình?

Nếu chúng tôi chỉ gọi setCar({color: "blue"}), điều này sẽ xóa nhãn hiệu, kiểu máy và năm khỏi trạng thái của chúng tôi.

Chúng tôi có thể sử dụng toán tử lây lan JavaScript để giúp chúng tôi.

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'));

Bởi vì chúng ta cần giá trị hiện tại của trạng thái, chúng ta truyền một hàm vào setCarhàm của chúng ta. Hàm này nhận giá trị trước đó.

Sau đó, chúng tôi trả về một đối tượng, chỉ lan truyền previousStatevà ghi đè lên màu.

import { useState } from "react";

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