React useState: một bản tóm tắt

Trong vài tháng qua, tôi đã nghiên cứu về React và xây dựng một số ứng dụng đơn giản. Một khái niệm mà tôi đang gặp khó khăn trong việc tiêu hóa là khái niệm về trạng thái React . Gần đây tôi tình cờ xem được một hướng dẫn tuyệt vời (mà tôi rất khuyên bạn nên dùng) giải thích rõ ràng về nó. Trong bài viết ngắn gọn này, tôi sẽ cố gắng tóm tắt những khái niệm quan trọng nhất mà tôi đã học được khi làm theo hướng dẫn để nó có thể hữu ích cho những người khác :-)

Trạng thái trong React là gì? Trạng thái của một thành phần là dữ liệu đang được sử dụng và hiển thị bên trong thành phần của chúng ta tại một thời điểm cụ thể.

Trong đoạn mã dưới đây, chúng tôi tạo một biến (iceCreamFlavor) và gán cho nó một giá trị ban đầu là “sô cô la”. Biến này được hiển thị bên trong mẫu thành phần của chúng tôi bằng cách sử dụng dấu ngoặc nhọn {iceCreamFlavor}. Chúng tôi mong đợi rằng bằng cách nhấp vào nút “Nhấp vào tôi”, hương vị kem sẽ thay đổi từ “sô cô la” thành “dâu tây”… Sau tất cả, đó là những gì chức năng HandClick làm…

const MyComponent = () => {
let iceCreamFlavor = "chocolate";
const handleClick = () => {
iceCreamFlavor = "strawberry";
};
return (
<div className="container-style">
<h2>Ice cream flavor</h2>
<p>{iceCreamFlavor}</p>
<button onClick={handleClick}>Click me</button>
</div>
);
};

Giá trị thay đổi nhưng nó không được hiển thị cho thành phần. Tại sao nó như vậy?

Điều này là do iceCreamFlavor không phải là một biến phản ứng và do đó thay đổi của nó không kích hoạt React hiển thị lại mẫu thành phần.

Để làm cho giá trị có phản ứng, chúng ta cần sử dụng hook useState, đây là một loại hàm đặc biệt.

Bằng cách viết:

useState("chocolate")

"Sô cô la" là giá trị ban đầu được hiển thị bên trong thành phần bằng cách sử dụng dấu ngoặc nhọn. Tuy nhiên, móc vẫn chưa hoàn chỉnh. Để hoàn thiện nó, chúng tôi cũng cần:

1. một "nơi" để lưu trữ giá trị này. Trong trường hợp này, chúng tôi sẽ sử dụng “iceCreamFlavor” (lưu ý rằng tên biến này là tùy ý).
2. một hàm sẽ chịu trách nhiệm cập nhật giá trị “iceCreamFlavor”, trong trường hợp này là “setIceCreamFlavor”. Thông thường, tên hàm bắt đầu bằng “set”, theo sau là tên của những gì chúng ta đang cập nhật.

const [iceCreamFlavor, setIceCreamFlavor] = useState(“chocolate”)

const Home = () => {
  const [iceCreamFlavor, setIceCreamFlavor] = useState(“chocolate”)
  
  const handleClick = () => {
    setIceCreamFlavor("strawberry");
  };
return (
 <div className="container-style">
 <h2>Ice cream flavor</h2>
 <p>{iceCreamFlavor}</p>
 <button onClick={handleClick}>Click me</button>
 </div>
 );
};

1. chức năng handleClick được kích hoạt.
2. setIceCreamFlavor cũng bị kích hoạt và điều này sẽ thay đổi hương vị kem từ “sô cô la” thành “dâu tây” đồng thời kích hoạt kết xuất lại mẫu.

Một vài lưu ý phụ về hook này:

• useState có thể được sử dụng nhiều lần tùy thích trong một thành phần.
• Để sử dụng hook này, nó cần phải được nhập như sau ở đầu thành phần của chúng ta:

import { useState } from “react”;