มอบความจำให้คอมโพเนนต์ของคุณด้วย useState เพื่อให้คุณแสดงค่าที่เปลี่ยนแปลงได้เมื่อผู้ใช้โต้ตอบ
เปิดบทเรียนนี้ใน Kodokonตัวนับไลก์ ข้อความที่พิมพ์ลงในช่องค้นหา เมนูที่เปิดและปิด: ค่าเหล่านี้ล้วน เปลี่ยนแปลง ในขณะที่แอปกำลังถูกใช้งาน ตัวแปรธรรมดายังไม่พอ เพราะ React ไม่รีเฟรชหน้าจอเมื่อมันเปลี่ยน คุณต้องใช้สิ่งที่เรียกว่า สเตต (state): ความจำที่เป็นของคอมโพเนนต์เอง คุณสร้างมันด้วย useState ซึ่งเป็น hook หมายถึงฟังก์ชันพิเศษที่ React ให้มา โดยชื่อของมันเริ่มต้นด้วย use
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Count: {count}
</button>
);
}มาแยกดูบรรทัดสำคัญกัน: const [count, setCount] = useState(0); useState(0) สร้างสเตตหนึ่งชิ้นที่มีค่าเริ่มต้นเป็น 0 และคืนค่าเป็นอาร์เรย์ที่มีสององค์ประกอบ ซึ่งคุณดึงออกมาผ่านการดีสตรัคเจอร์: count คือ ค่าปัจจุบัน และ setCount คือ ฟังก์ชันสำหรับอัปเดต ซึ่งเป็นวิธีเดียวที่อนุญาตให้เปลี่ยนค่านั้นได้ ในที่นี้ onClick จะทำให้ setCount(count + 1) ทำงานทุกครั้งที่คลิก (เราจะพูดถึงอีเวนต์อย่างละเอียดในบทเรียนถัดไป)
import { useState } from "react";
function NameInput() {
const [name, setName] = useState("");
return (
<div>
<input
value={name}
onChange={(e) => setName(e.target.value)}
/>
<p>Hello, {name}!</p>
</div>
);
}เมื่อคุณเรียก setName React จะทำสองสิ่ง: มัน เก็บ ค่าใหม่ จากนั้นมัน รันฟังก์ชันคอมโพเนนต์ของคุณใหม่ เพื่อคำนวณผลลัพธ์ใหม่ สิ่งนี้เรียกว่า การเรนเดอร์ใหม่ (re-render) นั่นคือเหตุผลที่ย่อหน้า Hello, {name}! อัปเดตด้วยตัวเองทุกครั้งที่พิมพ์ตัวอักษร: คุณอธิบายผลลัพธ์ ส่วนที่เหลือ React จัดการเอง
useState(0) คืนค่าอะไรออกมา?