Props และ state ทำงานอย่างไรใน React Native?

Question

Accepted Answer

**Props** และ **state** คือแนวคิดหลักของ React ที่ทำงานเหมือนกันใน React Native: **props** ส่งข้อมูลเข้าไปในคอมโพเนนต์ (อินพุตแบบอ่านอย่างเดียว) ส่วน **state** เก็บข้อมูลที่เปลี่ยนแปลงได้ตามเวลา (กระตุ้นให้เกิดการ re-render) การเข้าใจมันเป็นพื้นฐานสำคัญ ## Props — ข้อมูลที่ส่งเข้ามา (อ่านอย่างเดียว) ```jsx // props are inputs passed to a component (from its parent) — READ-ONLY function UserCard({ name, age }) { // receives props return {name}, {age}; } // pass props when using the component // → props flow DOWN (parent → child); a component doesn't change its own props ``` ## State — ข้อมูลที่เปลี่ยนแปลง (ผ่าน useState) ```jsx import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); // declare state + its setter return ( setCount(count + 1)}> {count} {/* uses state */} ); } // → calling setCount updates state → component RE-RENDERS with the new value ``` State คือข้อมูลภายในที่เปลี่ยนแปลงได้ การอัปเดตมัน (ผ่าน setter จาก `useState`) จะกระตุ้นให้เกิดการ re-render — เป็นวิธีที่ UI สะท้อนการเปลี่ยนแปลง ## Props เทียบกับ state ```text PROPS → passed IN from the parent; READ-ONLY (the component doesn't change them); for configuration/data from outside STATE → internal to the component; CHANGEABLE (via setState/useState); triggers re-renders; for data that changes over time (user input, toggles, fetched data) → Data flows DOWN via props; state changes drive UI updates. (Same as React for web.) ``` ## ทำไมจึงสำคัญ การเข้าใจ props และ state เป็นพื้นฐานสำคัญของ React Native เพราะมันคือ **แนวคิดหลักของ React ที่เป็นศูนย์กลางของการทำงานของคอมโพเนนต์และการอัปเดต UI** จึงเป็นความรู้ที่ต้องรู้ **Props** (ข้อมูลแบบอ่านอย่างเดียวที่ส่งเข้าไปในคอมโพเนนต์จาก parent ไหลลงตามโครงสร้างต้นไม้ของคอมโพเนนต์) คือวิธีที่คอมโพเนนต์รับการตั้งค่าและข้อมูลจากภายนอก ทำให้สร้างคอมโพเนนต์ที่นำกลับมาใช้ซ้ำและประกอบกันได้ **State** (ข้อมูลภายในที่เปลี่ยนแปลงได้ จัดการผ่าน hook `useState` ซึ่งการอัปเดตมันกระตุ้นให้เกิดการ re-render) คือวิธีที่คอมโพเนนต์เก็บและตอบสนองต่อข้อมูลที่เปลี่ยนแปลงตามเวลา (อินพุตของผู้ใช้, การสลับ, ข้อมูลที่ดึงมา) — เป็นกลไกที่ทำให้ UI สะท้อนการเปลี่ยนแปลง การเข้าใจ **ความแตกต่าง** — props ที่ส่งเข้ามาและอ่านอย่างเดียว (สำหรับข้อมูล/การตั้งค่าจากภายนอก) เทียบกับ state ที่อยู่ภายในและเปลี่ยนแปลงได้ (สำหรับข้อมูลที่เปลี่ยนแปลง ขับเคลื่อนการ re-render) — และหลักการที่ว่า **ข้อมูลไหลลงผ่าน props ขณะที่การเปลี่ยน state ขับเคลื่อนการอัปเดต UI** เป็นพื้นฐานสำคัญต่อการสร้างแอป React Native (และ React) ให้ถูกต้อง สิ่งเหล่านี้เป็นแนวคิดเดียวกันกับ React สำหรับเว็บทุกประการ ดังนั้นการเข้าใจมันจึงโอนย้ายมาได้โดยตรงและเป็นสิ่งจำเป็นสำหรับทุกคนที่สร้างคอมโพเนนต์ React Native การใช้ props และ state อย่างถูกต้อง (ส่งข้อมูลผ่าน props, จัดการข้อมูลที่เปลี่ยนแปลงด้วย state, เข้าใจการไหลของข้อมูลทิศทางเดียว) เป็นแกนหลักของคอมโพเนนต์ที่ใช้งานได้และถูกต้อง เนื่องจาก props และ state เป็นศูนย์กลางของการทำงานของคอมโพเนนต์ React Native (และ React) — รับข้อมูล (props) และจัดการการเปลี่ยนแปลง (state) เพื่อขับเคลื่อนการอัปเดต UI — และการเข้าใจมันเป็นพื้นฐานสำคัญต่อการสร้างแอป React Native ใด ๆ ให้ถูกต้อง ดังนั้นการเข้าใจ props และ state จึงเป็นความรู้พื้นฐานที่จำเป็น — แนวคิดหลักที่นักพัฒนา React Native ทุกคนต้องเข้าใจ เหมือนกับ React บนเว็บ (ความรู้จึงโอนย้ายมาได้) และเป็นพื้นฐานต่อการสร้างคอมโพเนนต์ที่รับข้อมูลและตอบสนองต่อการเปลี่ยนแปลง ซึ่งเป็นกลไกพื้นฐานของการพัฒนา UI ด้วย React Native