Bagaimanakah props dan state berfungsi dalam React Native?

Question

Accepted Answer

**Props** dan **state** ialah konsep teras React yang berfungsi secara identik dalam React Native: **props** menghantar data ke dalam komponen (input baca-sahaja), manakala **state** menyimpan data yang boleh berubah dari masa ke masa (mencetuskan render semula). Memahaminya adalah asas. ## Props — data yang dihantar masuk (baca-sahaja) ```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 — data yang berubah (melalui 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 ialah data dalaman yang boleh berubah; mengemas kininya (melalui setter daripada `useState`) mencetuskan render semula — cara UI mencerminkan perubahan. ## Props lwn 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.) ``` ## Mengapa ia penting Memahami props dan state adalah asas kepada React Native kerana ia merupakan **konsep teras React yang penting kepada cara komponen berfungsi dan cara UI dikemas kini**, jadi ia merupakan pengetahuan yang mesti diketahui. **Props** (data baca-sahaja yang dihantar ke dalam komponen daripada induknya, mengalir ke bawah pokok komponen) ialah cara komponen menerima konfigurasi dan data dari luar, membolehkan komponen boleh guna semula dan boleh disusun. **State** (data dalaman yang boleh berubah yang diuruskan melalui hook `useState`, di mana mengemas kininya mencetuskan render semula) ialah cara komponen menyimpan dan bertindak balas terhadap data yang berubah dari masa ke masa (input pengguna, togol, data yang diambil) — mekanisme yang membolehkan UI mencerminkan perubahan. Memahami **perbezaan** — props dihantar masuk dan baca-sahaja (untuk data/konfigurasi luaran) berbanding state yang bersifat dalaman dan boleh berubah (untuk data yang berubah, memacu render semula) — dan prinsip bahawa **data mengalir ke bawah melalui props manakala perubahan state memacu kemas kini UI** adalah asas untuk membina aplikasi React Native (dan React) dengan betul. Ini ialah konsep yang sama persis seperti React untuk web, jadi memahaminya dipindahkan terus dan adalah penting bagi sesiapa yang membina komponen React Native. Mendapatkan props dan state dengan betul (menghantar data melalui props, menguruskan data berubah dengan state, memahami aliran data sehala) adalah teras kepada komponen yang berfungsi dan betul. Memandangkan props dan state adalah penting kepada cara komponen React Native (dan React) berfungsi — menerima data (props) dan menguruskan perubahan (state) untuk memacu kemas kini UI — dan memahaminya adalah asas untuk membina sebarang aplikasi React Native dengan betul, memahami props dan state adalah pengetahuan React Native asas yang penting — konsep teras yang setiap pembangun React Native mesti faham, identik dengan React web (jadi pengetahuan dipindahkan), dan asas untuk membina komponen yang menerima data dan bertindak balas terhadap perubahan, mekanik asas pembangunan UI React Native.