Sự khác nhau giữa Props và State trong React
Sự khác nhau giữa Props và State trong React
- Props là các biến, data được truyền từ component cha và có thể truy cập được ở cả các component con.
- State được khởi tạo và chỉnh sửa và chỉ có thể truy bởi chính bản thân component chứa nó.
Cũng chính vì sự khác nhưa giữa Props và State mà ta có khái niệm Stateful component và Stateless component .
Stateless Component là gì?
Stateless component là các component chỉ chứa props, các component loại này chỉ dùng để render() thì sẽ hiệu quả hơn.
Stateful Component là gì?
Stateful Component là các component chứa cả props và state, các component này được dùng xử lý data, phản hỏi yêu cầu người dùng, phù hợp cho mô hình client server…
Khi nào dùng Props, khi nào dùng state?
Cả state và props đều dùng để quản lý data bên trong một component.
- Với props:
Thông thường props được set bởi component cha và truyền vào component con và cố định trong suốt vòng đời. Do đó ta dùng props trong trường hợp cần trao đổi data giữa các component, ví dụ:
class Parent extends React.Component{
render()
{
return(
<div>
<Child name = {"ron"}/>
</div>
);
}
}
class Child extends React.Component{
{
render(){
return(
<div>
{this.props.name}
</div>
);
}
}
- Với state:
State có thể bị thay đổi nên nó thường được dùng để theo dõi sự thay đổi bên trong component và render lại.
Okay, Done!
References: