Tại sao trong class React lại viết super(props)?
Bài đăng này đã không được cập nhật trong 5 năm
Khi làm việc với React thì khi viết constructor mà không có super() thì sẽ lỗi. Không viết super(props) thì sẽ không thể dùng được this.props trong constructor
.
class Checkbox extends React.Component {
constructor(props) {
super(props);
this.state = { isOn: true };
}
}
Bây giờ chúng ta sẽ cùng tìm hiểu tại sao tại sao lại gọi super()
. Có thể không gọi không ? Nếu gọi mà không pass props vào thì sao, có tham số khác ngoài props không ?
Tại sao phải gọi super()
trong Javascript super
như là "hàm khởi tạo của class cha" (parent class constructor). Trong ví dụ trên là class React.Component
. Có nghĩa là bạn không thể dùng this
cho đến khi gọi super()
class Checkbox extends React.Component {
constructor(props) {
// 🔴 Can’t use `this` yet
super(props);
// ✅ Now it’s okay though
this.state = { isOn: true };
}
// ...
}
Không truyền props vào super thì sẽ ra sao ?
Sẽ ra sao khi bạn truyền tham số props vào super()
. Khi không gọi super(props)
thì bạn sẽ không thể dùng this.props
bên trong constructor. Bên trong React.Component
sẽ xử lý như sau:
// Inside React
class Component {
constructor(props) {
this.props = props;
// ...
}
}
Nhưng mà đôi khi bạn chỉ gọi super()
thay vì super(props)
ở constructor mà vẫn có thể dùng this.props
ở render
hay ở các lifecycle khác ? Bởi vì React sẽ gán props sau khi gọi hàm contructor
// Inside React
const instance = new YourComponent(props);
instance.props = props;
Vậy cả khi bạn quên truyền props vào super()
thì React vẫn sẽ set cho bạn.
Có còn tham số nào ngoài props không ?
Khi mà bản React 16.6 được ra mắt cùng với contextAPI mới thì ngoài props ra thì còn có 1 tham số khác đó là context
.
Nguồn
Bài viết mình dịch lại từ đây và có lược bỏ một số chỗ mà mình thấy không cần thiết. Các bạn có thể xem thêm ở đây https://overreacted.io/why-do-we-write-super-props/
All rights reserved