1. JSX ไม่ใช่ HTML (แต่มันคือความฉลาดที่ซ่อนอยู่)
JSX เป็นแค่ Sugar Syntax ของ React.createElement()
💡 เปรียบเทียบกับชีวิตประจำวัน: เหมือนคุณกำลัง "สั่งชุดอาหารตามสั่ง".
- HTML คือจานที่คุณเห็นบนโต๊ะ (Static)
- JSX คือ "ใบสั่งอาหาร" ที่คุณเขียนระบุว่า "เอาข้าวกะเพรา ไข่ดาวไม่สุก พริกน้ำปลาเยอะๆ"
- React จะเป็นคนรับใบสั่งนี้ไปจัดจาน (Render) ให้คุณเองตามที่คุณระบุไว้ในวงเล็บ
{}(JavaScript Expression)
2. State vs Props: ใครคือนาย ใครคือบ่าว?
- Props (Properties): เหมือน "พันธุกรรม หรือ ของขวัญจากพ่อแม่". คุณรับมาแล้วคุณเปลี่ยนมันไม่ได้ (Immutable) คุณได้ชื่อว่า "สมชาย" มาตั้งแต่เกิด (Parent sends
name="สมชาย") คุณก็ต้องใช้ชื่อนั้น - State: เหมือน "ความรู้สึก หรือ ของในกระเป๋าคุณเอง". คุณเปลี่ยนมันได้ตลอดเวลา (Mutable) ตอนนี้คุณอาจจะรู้สึก "หิว" (State:
hungry) แต่พอได้กินข้าวคุณก็เปลี่ยนสถานะเป็น "อิ่ม" (State:full)
กฎเหล็ก: ข้อมูลไหลลงล่างเสมอ (One-Way Data Flow) เหมือนน้ำตกที่ไหลจากยอดเขาลงสู่ลำธาร
3. useState: กับดัก Asynchronous
setState ไม่ได้เปลี่ยนค่าทันที แต่มันคือการ "จองคิวอัปเดต"
💡 เปรียบเทียบกับชีวิตประจำวัน: เหมือนคุณ "หย่อนจดหมายลงตู้". คุณเขียนจดหมายบอกว่า "พรุ่งนี้ผมจะไปหานะ" (Set state) แต่ตัวคุณในวินาทีที่หย่อนจดหมายลงตู้ คุณยังอยู่ที่เดิม! (ค่าในตัวแปรยังไม่เปลี่ยน) คุณต้องรอให้บุรุษไปรษณีย์ไปส่ง (Re-render) เพื่อนคุณถึงจะรู้ว่าคุณกำลังจะไปหา
// ✅ Best Practice: ใช้ Functional Update เมื่อค่าใหม่ขึ้นอยู่กับค่าเดิม
const handleCorrectClick = () => {
setCount((prevCount) => prevCount + 1); // 👈 มั่นใจได้ว่าได้ค่าล่าสุด 100%
};
4. useEffect: การจัดการกับโลกภายนอก (Side Effects)
ใช้เมื่อต้องการติดต่อโลกภายนอก เช่น เรียก API หรือตั้งเวลา
💡 เปรียบเทียบกับชีวิตประจำวัน: เหมือน "การตั้งนาฬิกาปลุก".
- คุณไม่ได้นั่งจ้องนาฬิกาทุกวินาที (Pure Render)
- แต่คุณสั่งนาฬิกาไว้ว่า "ถ้าถึง 8 โมงเช้า (Dependency) ให้ส่งเสียงดัง (Effect) ด้วยนะ"
- และที่สำคัญที่สุด: เมื่อคุณจะออกจากบ้าน คุณต้อง "กดปิดนาฬิกาปลุก (Cleanup Function)" ด้วย ไม่เช่นนั้นมันจะดังรบกวนคนอื่นไปตลอดกาล (Memory Leak)
useEffect(() => {
const timer = setInterval(() => console.log("Tick"), 1000);
// ✅ Cleanup: อย่าลืมคืนพื้นที่/หยุดทำงานเมื่อ Component ตาย
return () => clearInterval(timer);
}, []);
5. Custom Hooks: พลังแห่งการ Reuse
💡 เปรียบเทียบกับชีวิตประจำวัน: เหมือน "สูตรอาหารลับของคุณยาย". แทนที่จะต้องมานั่งนึกส่วนผสมใหม่ทุกครั้งที่คุณจะทำแกงเขียวหวาน คุณก็แค่ดึงสูตร (Hook) ออกมาใช้ "สูตรแกงเขียนหวานคุณยาย (useGreenCurry)" ใส่เข้าหม้อไหนก็ได้รสชาติเดิมเป๊ะ!
สรุปจากรุ่นพี่
อย่ารีบไปเขียนโค้ดซับซ้อน ถ้า "รากฐาน" (Fundamentals) ยังไม่แน่น เข้าใจเรื่องความแตกต่างของ State/Props และการจัดการ Lifecycle ผ่าน Hooks ให้แม่นยำ แล้วคุณจะพบว่า React ไม่ใช่เรื่องยาก แต่เป็นเรื่องของ "การจัดการความสัมพันธ์ของข้อมูล" ครับ!