Props và state hoạt động như thế nào trong React Native?

Question

Accepted Answer

**Props** và **state** là các khái niệm React cốt lõi hoạt động giống hệt trong React Native: **props** truyền dữ liệu vào một component (đầu vào chỉ đọc), trong khi **state** giữ dữ liệu có thể thay đổi theo thời gian (gây ra re-render). Hiểu chúng là nền tảng. ## Props — dữ liệu truyền vào (chỉ đọc) ```jsx // props là đầu vào được truyền cho một component (từ component cha) — CHỈ ĐỌC function UserCard({ name, age }) { // nhận props return {name}, {age}; } // truyền props khi dùng component // → props chảy XUỐNG (cha → con); một component không thay đổi props của chính nó ``` ## State — dữ liệu thay đổi (qua useState) ```jsx import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); // khai báo state + setter của nó return ( setCount(count + 1)}> {count} {/* dùng state */} ); } // → gọi setCount cập nhật state → component RE-RENDER với giá trị mới ``` State là dữ liệu nội bộ, có thể thay đổi; cập nhật nó (qua setter từ `useState`) gây ra re-render — cách UI phản ánh thay đổi. ## Props so với state ```text PROPS → truyền VÀO từ component cha; CHỈ ĐỌC (component không thay đổi chúng); dùng cho cấu hình/dữ liệu từ bên ngoài STATE → nội bộ của component; CÓ THỂ THAY ĐỔI (qua setState/useState); gây ra re-render; dùng cho dữ liệu thay đổi theo thời gian (input người dùng, toggle, dữ liệu fetch về) → Dữ liệu chảy XUỐNG qua props; thay đổi state điều khiển cập nhật UI. (Giống React cho web.) ``` ## Tại sao điều này quan trọng Hiểu props và state là nền tảng cho React Native vì chúng là **các khái niệm React cốt lõi trung tâm cho cách component hoạt động và cách UI cập nhật**, nên đây là kiến thức buộc phải biết. **Props** (dữ liệu chỉ đọc được truyền vào một component từ component cha, chảy xuống cây component) là cách component nhận cấu hình và dữ liệu từ bên ngoài, cho phép các component tái sử dụng, kết hợp được. **State** (dữ liệu nội bộ, có thể thay đổi được quản lý qua hook `useState`, nơi cập nhật nó gây ra re-render) là cách component giữ và phản ứng với dữ liệu thay đổi theo thời gian (input người dùng, toggle, dữ liệu fetch về) — cơ chế mà nhờ đó UI phản ánh thay đổi. Hiểu **sự phân biệt** — props truyền vào và chỉ đọc (cho dữ liệu/cấu hình bên ngoài) so với state là nội bộ và có thể thay đổi (cho dữ liệu thay đổi, điều khiển re-render) — và nguyên tắc **dữ liệu chảy xuống qua props trong khi thay đổi state điều khiển cập nhật UI** là nền tảng để xây dựng ứng dụng React Native (và React) đúng cách. Đây chính là các khái niệm giống React cho web, nên hiểu chúng chuyển giao trực tiếp và thiết yếu với bất kỳ ai xây dựng component React Native. Làm đúng props và state (truyền dữ liệu qua props, quản lý dữ liệu thay đổi bằng state, hiểu luồng dữ liệu một chiều) là cốt lõi cho các component đúng đắn, hoạt động được. Vì props và state là trung tâm cho cách component React Native (và React) hoạt động — nhận dữ liệu (props) và quản lý thay đổi (state) để điều khiển cập nhật UI — và hiểu chúng là nền tảng để xây dựng bất kỳ ứng dụng React Native nào đúng cách, hiểu props và state là kiến thức React Native thiết yếu, nền tảng — các khái niệm cốt lõi mà mọi lập trình viên React Native phải hiểu, giống hệt web React (nên kiến thức chuyển giao được), và nền tảng để xây dựng các component nhận dữ liệu và phản ứng với thay đổi, cơ chế cơ bản của phát triển UI React Native.