Sự khác biệt giữa state và props là gì?

Question

Accepted Answer

**Props** là dữ liệu đầu vào được **truyền vào** một component bởi component cha (chỉ đọc, từ góc nhìn của con). **State** là dữ liệu mà component **sở hữu và quản lý nội bộ** (nó có thể thay đổi state). Sự phân biệt: props đến từ bên ngoài và không thay đổi bên trong component; state là nội bộ và có thể thay đổi. ## Props — truyền vào, chỉ đọc ```jsx function Greeting({ name }) { // `name` là một prop từ component cha return

Hello, {name}

; // name = "Bob"; // ❌ component con KHÔNG được sửa props của nó } // component cha cung cấp prop ``` Props chảy **xuống** từ cha sang con. Con đọc chúng nhưng không thể thay đổi — để thay đổi giá trị của một prop, component cha phải truyền một giá trị mới. ## State — sở hữu nội bộ, có thể thay đổi ```jsx function Counter() { const [count, setCount] = useState(0); // `count` là state riêng của component này return ; // component cập nhật state RIÊNG của nó qua setCount } ``` State được tạo và điều khiển *bên trong* component; component thay đổi nó (qua `setCount`/`setState`), và việc thay đổi nó kích hoạt re-render. ## So sánh song song ```text Props State Nguồn truyền từ cha tạo trong component Thay đổi được? chỉ đọc (trong con) có (qua setter) Ai điều khiển component cha chính component đó Kích hoạt render khi cha thay đổi nó khi component cập nhật nó Mục đích cấu hình/truyền dữ liệu vào theo dõi dữ liệu nội bộ thay đổi ``` ## Chúng làm việc cùng nhau ```jsx function Parent() { const [user, setUser] = useState({ name: "Ann" }); // STATE ở component cha return ; // truyền XUỐNG dưới dạng PROP } ``` **State** của một component thường được truyền xuống component con dưới dạng **prop**. Lifting state up và truyền xuống chính là pattern này — component cha sở hữu state, các con nhận nó dưới dạng props. ## Tại sao điều này quan trọng Sự phân biệt state với props là nền tảng của các framework component-based. Nó định nghĩa quyền sở hữu và luồng dữ liệu: props là cấu hình bên ngoài, chỉ đọc (data down); state là dữ liệu nội bộ, có thể thay đổi mà component quản lý. Nhầm lẫn chúng — mutate props, hoặc nhân bản props thành state — gây ra các bug kinh điển. Hiểu rằng dữ liệu chảy xuống dưới dạng props trong khi mỗi component sở hữu state riêng là nền móng của thiết kế component React/Vue/Angular.