Cả hai đều chứa dữ liệu ảnh hưởng tới những gì một component render, nhưng khác nhau ở ai sở hữu dữ liệu và liệu nó có thể thay đổi hay không.
- props được truyền vào một component từ cha của nó. Chúng chỉ-đọc — component không bao giờ được sửa chúng.
Cả hai đều chứa dữ liệu ảnh hưởng tới những gì một component render, nhưng khác nhau ở ai sở hữu dữ liệu và liệu nó có thể thay đổi hay không.
// `step` là một PROP — do cha cho, con chỉ đọc nó.
// `count` là STATE — sở hữu ở đây, thay đổi khi click, gây render lại.
function Counter({ step }) {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + step)}>
{count}
</button>
);
}
// Cha quyết định step và truyền xuống:
<Counter step={5} />
Dữ liệu chảy xuống (cha → con qua props) và thay đổi chảy lên (con yêu cầu cha thay đổi gì đó qua một callback prop như onChange). Luồng một chiều này là điều làm ứng dụng React dự đoán được.
props.x = 1) là một lỗi — React sẽ không render lại và bạn đã phá vỡ quyền sở hữu của cha. Để "thay đổi một prop", hãy gọi một callback mà cha đã cho để cha cập nhật state riêng và truyền giá trị mới xuống.