คู่มือการใช้ useState ใน React
แถบความปลอดภัยของรหัสผ่านของคุณจะเปลี่ยนจาก "อ่อนแอ" เป็น "แข็งแกร่ง" ในขณะที่คุณพิมพ์ React จะจดจำสิ่งที่คุณพิมพ์ผ่าน state
State ใช้สำหรับเก็บข้อมูล โดยจะคอยติดตามว่าคุณพิมพ์หรือคลิกอะไรลงไป
ลองจินตนาการว่าคุณกำลังพิมพ์ชื่อของคุณ
- State เริ่มต้นของคุณคือสตริงว่าง (empty string)
- คุณพิมพ์ J
- คุณเรียกใช้ฟังก์ชันเพื่ออัปเดต state จาก "" เป็น "J"
- คุณพิมพ์ o
- คุณเรียกใช้ฟังก์ชันเพื่อเปลี่ยน state เป็น "Jo"
ทุกครั้งที่คุณอัปเดต state ตัว React จะทำการ re-render UI ใหม่ ซึ่งการ re-render หมายถึงการที่ React ล้างการแสดงผลเก่าออกและวาดการแสดงผลใหม่ด้วยข้อมูลที่อัปเดตแล้วของคุณ
ทำไมถึงไม่ใช้ตัวแปรธรรมดา? ตัวแปรธรรมดาจะเปลี่ยนค่าในโค้ดของคุณ แต่จะไม่ช่วยอัปเดตหน้าจอ ผู้ใช้งานของคุณจะเห็นแต่ข้อมูลเก่า React state จะเข้ามาแก้ปัญหานี้โดยการเชื่อมโยงข้อมูลของคุณเข้ากับ UI
วิธีการใช้งาน useState:
Import มาจาก React
import { useState } from 'react';ประกาศตัวแปร (Declare)
const [age, setAge] = useState(20);
ในตัวอย่างนี้:
- age คือค่าปัจจุบันของคุณ
- setAge คือฟังก์ชันสำหรับเปลี่ยนค่า
- 20 คือค่าเริ่มต้นของคุณ
ลองทำตามดูตอนนี้เลย เปิดโปรเจกต์ React ขึ้นมา สร้างตัวนับ (counter) ลองคลิกปุ่มเพื่ออัปเดตจำนวน แล้วสังเกตหน้าจอที่เปลี่ยนไปในทันที
แหล่งที่มา: https://dev.to/kaleablemmadev/usestate-in-react-a-beginners-guide-1j8i