Phản ứng useState Hook
React useState Hook cho phép chúng ta theo dõi trạng thái trong một thành phần hàm.
Trạng thái thường đề cập đến dữ liệu hoặc thuộc tính cần được theo dõi trong ứng dụng.
Nhập khẩu useState
Để sử dụng useState Hook, trước tiên chúng ta cần import nó vào thành phần của mình.
Ví dụ:
Ở đầu thành phần của bạn, import hook useState .
import { useState } from "react"; Lưu ý rằng chúng ta đang tách useState khỏi react vì đây là bản xuất có tên.
Để tìm hiểu thêm về việc phá hủy, hãy xem phần ES6 .
Khởi tạo useState
Chúng ta khởi tạo trạng thái của mình bằng cách gọi useState trong thành phần hàm của mình.
useState chấp nhận 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.
Ví dụ:
Khởi tạo trạng thái ở đầu thành phần hàm.
import { useState } from "react"; function FavoriteColor() { const [color, setColor] = useState(""); } Hãy lưu ý rằng một lần nữa, chúng ta đang hủy bỏ các giá trị được 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à hàm được sử dụng để cập nhật trạng thái của chúng ta.
Những tên này là các biến có thể được đặt tên bất cứ thứ gì bạn muốn.
Cuối cùng, chúng ta đặt trạng thái ban đầu thành một chuỗi trống: useState("")
Được chứng nhận!
$95 ĐĂNG KÝ
Đọc trạng thái
Bây giờ chúng ta có thể bao gồm trạng thái của mình ở bất kỳ đâu trong thành phần của mình.
Ví dụ:
Sử dụng biến trạng thái trong thành phần được kết xuất.
import { useState } from "react"; import ReactDOM from "react-dom/client"; function FavoriteColor() { const [color, setColor] = useState("red"); return <h1>My favorite color is {color}!</h1> } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<FavoriteColor />);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 cập nhật trạng thái của mình.
Chúng ta không bao giờ nên cập nhật trực tiếp trạng thái. Ví dụ: color = "red" không được phép.
Ví dụ:
Sử dụng một nút để cập nhật trạng thái:
import { useState } from "react"; import ReactDOM from "react-dom/client"; function FavoriteColor() { const [color, setColor] = useState("red"); return ( <> <h1>My favorite color is {color}!</h1> <button type="button" onClick={() => setColor("blue")} >Blue</button> </> ) } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<FavoriteColor />);Nhà nước có thể nắm giữ những gì
useState Hook có thể được sử dụng để theo dõi các chuỗi, số, boolean, mảng, đối tượng và bất kỳ sự kết hợp nào của chúng!
Chúng ta có thể tạo nhiều Hook trạng thái để theo dõi các giá trị riêng lẻ.
Ví dụ:
Tạo nhiều móc trạng thái:
import { useState } from "react"; import ReactDOM from "react-dom/client"; 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> </> ) } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Car />);Hoặc, chúng ta chỉ có thể sử dụng một trạng thái và thay vào đó bao gồm một đối tượng!
Ví dụ:
Tạo một Hook duy nhất chứa một đối tượng:
import { useState } from "react"; import ReactDOM from "react-dom/client"; 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> </> ) } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Car />); Vì hiện tại chúng ta đang theo dõi một đối tượng nên chúng ta cần tham chiếu đối tượng đó và sau đó là thuộc tính của đối tượng đó khi hiển thị thành phần. (Ví dụ: car.brand )
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 xe của mình?
Nếu chúng ta 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 ta.
Chúng tôi có thể sử dụng toán tử trải rộng JavaScript để trợ giúp.
Ví dụ:
Sử dụng toán tử trải rộng JavaScript để chỉ cập nhật màu của ô tô:
import { useState } from "react"; import ReactDOM from "react-dom/client"; 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> </> ) } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Car />); Vì cần giá trị hiện tại của trạng thái nên chúng tôi chuyển một hàm vào hàm setCar . Hàm này nhận giá trị trước đó.
Sau đó, chúng tôi trả về một đối tượng, trải rộng previousState và chỉ ghi đè màu.
