React là một thư viện JavaScript phổ biến được sử dụng để xây dựng giao diện người dùng. Một trong những khía cạnh quan trọng nhất của React là vòng đời (life-cycle) của các component. Hiểu rõ về vòng đời của component sẽ giúp bạn tối ưu hóa hiệu suất, quản lý trạng thái và xử lý các sự kiện một cách hiệu quả. Bài viết này sẽ cung cấp cho bạn cái nhìn chi tiết về vòng đời của React component và các phương thức tương ứng.
Vòng Đời của React Component
Vòng đời của một React component bao gồm ba giai đoạn chính:
- Mounting: Khi component được tạo và gắn vào DOM.
- Updating: Khi component nhận props mới hoặc trạng thái (state) thay đổi.
- Unmounting: Khi component bị xóa khỏi DOM.
Mỗi giai đoạn đều có các phương thức vòng đời (lifecycle methods) tương ứng mà bạn có thể sử dụng để quản lý và tối ưu hóa component.
Mounting
Mounting là giai đoạn khi một component được tạo và gắn vào DOM. Các phương thức vòng đời trong giai đoạn này bao gồm:
Constructor
constructor(props) là phương thức được gọi đầu tiên khi một instance của component được tạo ra. Đây là nơi thích hợp để khởi tạo trạng thái (state) và ràng buộc các phương thức của component.
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
// khởi tạo state
};
// ràng buộc phương thức
}
}getDerivedStateFromProps
static getDerivedStateFromProps(props, state) được gọi ngay trước khi render. Phương thức này cho phép bạn cập nhật trạng thái dựa trên sự thay đổi của props.
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.someValue !== prevState.someValue) {
return {
someValue: nextProps.someValue
};
}
return null;
}render
render() là phương thức bắt buộc trong mỗi component. Phương thức này trả về phần tử React đại diện cho UI của component.
render() {
return (
<div>
Hello, world!
</div>
);
}componentDidMount
componentDidMount() được gọi ngay sau khi component được gắn vào DOM. Đây là nơi thích hợp để thực hiện các thao tác bất đồng bộ như gọi API hoặc thiết lập các subscription.
componentDidMount() {
// gọi API hoặc thiết lập subscription
}Updating
Updating là giai đoạn khi một component nhận props mới hoặc trạng thái thay đổi. Các phương thức vòng đời trong giai đoạn này bao gồm:
getDerivedStateFromProps
getDerivedStateFromProps cũng được gọi trong giai đoạn này nếu component nhận props mới.
shouldComponentUpdate
shouldComponentUpdate(nextProps, nextState) cho phép bạn kiểm soát việc render lại component. Phương thức này nên trả về true hoặc false tùy thuộc vào việc bạn có muốn component được render lại hay không.
shouldComponentUpdate(nextProps, nextState) {
// logic để quyết định có render lại hay không
return true;
}render
render() được gọi lại khi trạng thái hoặc props thay đổi.
getSnapshotBeforeUpdate
getSnapshotBeforeUpdate(prevProps, prevState) được gọi ngay trước khi các thay đổi DOM được phản ánh. Phương thức này trả về một giá trị sẽ được chuyển tiếp đến componentDidUpdate.
getSnapshotBeforeUpdate(prevProps, prevState) {
// trả về giá trị để chuyển tiếp đến componentDidUpdate
return null;
}componentDidUpdate
componentDidUpdate(prevProps, prevState, snapshot) được gọi ngay sau khi component được cập nhật. Đây là nơi thích hợp để thực hiện các tác vụ dựa trên sự thay đổi của DOM.
componentDidUpdate(prevProps, prevState, snapshot) {
// thực hiện các tác vụ sau khi DOM cập nhật
}Unmounting
Unmounting là giai đoạn khi một component bị xóa khỏi DOM. Phương thức vòng đời trong giai đoạn này bao gồm:
componentWillUnmount
componentWillUnmount() được gọi ngay trước khi component bị xóa khỏi DOM. Đây là nơi thích hợp để hủy bỏ các subscription và xóa các tài nguyên để tránh rò rỉ bộ nhớ.
componentWillUnmount() {
// hủy bỏ subscription và xóa các tài nguyên
}Các Phương Thức Khác
componentDidCatch
componentDidCatch(error, info) được gọi khi có lỗi xảy ra trong quá trình render, trong phương thức lifecycle hoặc trong các constructor của bất kỳ component con nào. Phương thức này cho phép bạn xử lý các lỗi và hiển thị fallback UI.
componentDidCatch(error, info) {
// xử lý lỗi và hiển thị UI thay thế
}Kết Luận
Hiểu rõ vòng đời của React component là rất quan trọng để xây dựng các ứng dụng React hiệu quả và tối ưu hóa hiệu suất. Bằng cách nắm vững các phương thức vòng đời và biết khi nào sử dụng chúng, bạn có thể quản lý trạng thái, xử lý các sự kiện và tối ưu hóa trải nghiệm người dùng một cách tốt nhất. Hãy thử áp dụng những kiến thức này vào các dự án React của bạn để thấy được sự khác biệt.
Tham Khảo
- React Official Documentation
- MDN Web Docs on React
- Stack Overflow on React Lifecycle Methods
- FreeCodeCamp on React Lifecycle Methods
- Blog Posts and Tutorials on Medium
