Trong bài viết này, chúng ta sẽ tìm hiểu về Component Life Cycle trong ReactJS và cách các phương thức Life Cycle ảnh hưởng đến việc tạo và cập nhật components.
- Giới thiệu về Component Life Cycle trong ReactJS
- Các phương thức Life Cycle trong ReactJS
- Phương thức Mounting
- Constructor
- getDerivedStateFromProps
- render
- componentDidMount
- Phương thức Updating
- getDerivedStateFromProps
- shouldComponentUpdate
- render
- getSnapshotBeforeUpdate
- componentDidUpdate
- Phương thức Unmounting
- componentWillUnmount
- Kết luận
Lifecycle methods trong React.js là gì?
- Mounting methods:
- constructor: được gọi đầu tiên khi component được tạo ra.
- static getDerivedStateFromProps: được gọi sau constructor, trước khi component được render lần đầu tiên và sau đó trước mỗi lần cập nhật state hoặc props.
- render: phương thức chính để render ra các element React.
- componentDidMount: được gọi sau khi component đã được render lần đầu tiên và được gắn vào DOM.
- Updating methods:
- static getDerivedStateFromProps: được gọi trước mỗi lần cập nhật state hoặc props.
- shouldComponentUpdate: được gọi trước mỗi lần component được render lại để xác định xem component có cần render lại hay không.
- render: phương thức chính để render ra các element React.
- componentDidUpdate: được gọi sau mỗi lần component được render lại.
- Unmounting methods:
- componentWillUnmount: được gọi trước khi component bị xóa khỏi DOM.
Các lifecycle methods này cung cấp cho chúng ta cách để thực hiện các tác vụ như khởi tạo state, fetch data từ API, cập nhật state và thực hiện các tác vụ khác liên quan đến lifecycle của component. Việc sử dụng đúng các lifecycle methods sẽ giúp ta viết code dễ hiểu, dễ bảo trì và tối ưu hóa hiệu suất của ứng dụng React.
Ví dụ về life cycle giúp chúng ta hiểu rõ hơn
Giả sử chúng ta có một component tên là Counter, và muốn thực hiện một số logic khi component được khởi tạo và unmounted.
- ví dụ về class component
import React, { Component } from 'react';
class Counter extends Component {
constructor(props) {
super(props);
<a href="https://nodemy.vn/hieu-arrow-function-va-this-trong-javascript-tao-ra-nhung-ham-manh-me-voi-cu-phap-ngan-gon-huong-dan-day-du-cho-nguoi-moi-bat-dau-important/">this</a>.state = { count: 0 };
console.log('Constructor called');
}
componentDidMount() {
console.log('Component mounted');
}
componentWillUnmount() {
console.log('Component unmounted');
}
increment = () => {
this.setState({ count: this.state.count + 1 });
}
render() {
console.log('Render called');
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.increment}>Increment</button>
</div>
);
}
}
export default Counter;
Ở đây, chúng ta sử dụng 3 phương thức lifecycle:
constructor: Phương thức khởi tạo được gọi đầu tiên khi component được khởi tạo. Chúng ta khởi tạo state ban đầu của component bằng cách thiết lập giá trị củacountlà 0, và in ra thông báo “Constructor called” trên console.componentDidMount: Phương thức này được gọi sau khi component được hiển thị lần đầu tiên trên màn hình. Chúng ta in ra thông báo “Component mounted” trên console.componentWillUnmount: Phương thức này được gọi khi component bị unmounted, tức là khi component bị xóa khỏi DOM. Chúng ta in ra thông báo “Component unmounted” trên console.
Ngoài ra, chúng ta sử dụng phương thức render để hiển thị nội dung của component. Mỗi khi state của component thay đổi, phương thức này sẽ được gọi lại để cập nhật giao diện.
Trong ví dụ này, khi chúng ta nhấn vào nút “Increment”, phương thức increment được gọi để tăng giá trị của count và cập nhật state của component. Khi state thay đổi, phương thức render được gọi lại để hiển thị giá trị mới của count.
Kết quả khi chạy chương trình sẽ là hiển thị một số lần gọi Render called trên console khi state thay đổi và một số thông báo về các phương thức lifecycle được gọi khi component được khởi tạo và unmounted.
2.với function component
Function Component là một loại thành phần đơn giản hơn, được viết dưới dạng hàm và không có các phương thức life cycle như Class Component. Nhưng từ phiên bản React 16.8, React cung cấp cho chúng ta một tính năng mới, đó là React Hook, trong đó có một hook quan trọng để xử lý các tương tác với vòng đời của một Function Component đó là useEffect.
useEffect là một trong những hooks quan trọng nhất trong React và được sử dụng để thực hiện các tác vụ trong các giai đoạn khác nhau của vòng đời của một Function Component.
Ví dụ về sử dụng useEffect trong Function Component:
import React, { <a href="https://nodemy.vn/doi-chut-ve-usestate-trong-react-hooks/">useState</a>, useEffect } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
useEffect(() => {
console.log('Component mounted!');
return () => {
console.log('Component unmounted!');
};
}, []);
const increment = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
};
export default Counter;
Trong ví dụ trên, chúng ta sử dụng hook useEffect để ghi log khi component được mount và unmount. useEffect nhận vào hai tham số, tham số đầu tiên là một hàm callback được gọi khi component được mount hoặc update, tham số thứ hai là một mảng dependency để quản lý việc kích hoạt lại hay không gọi lại hàm callback.
Nếu mảng dependency là một mảng rỗng, hàm callback sẽ được gọi một lần khi component được mount. Nếu mảng dependency có giá trị, useEffect sẽ kiểm tra các giá trị trong mảng này và gọi lại hàm callback nếu các giá trị trong mảng dependency thay đổi.
Trên đây là một ví dụ cơ bản về sử dụng hook useEffect trong Function Component. Tuy nhiên, trong thực tế, chúng ta có thể sử dụng useEffect để thực hiện nhiều tác vụ khác nhau, chẳng hạn như gọi API, xử lý các sự kiện, hoặc thay đổi nội dung của các thành phần khác. Việc sử dụng hook useEffect sẽ giúp chúng ta quản lý được vòng đời
Kết luận
Lifecycle Methods trong React là một tập hợp các phương thức được gọi trong quá trình một component React được tạo ra, cập nhật và xóa bỏ. Điều này cho phép bạn quản lý và thay đổi trạng thái của component, tương tác với DOM, cũng như gọi API và các tác vụ khác.
Các Lifecycle Methods của React có thể được chia thành 3 nhóm chính: Mounting (tạo component), Updating (cập nhật component) và Unmounting (xóa component). Mỗi nhóm sẽ có những phương thức được gọi tương ứng với nó, ví dụ như componentDidMount() được gọi khi một component được tạo ra và hiển thị lần đầu tiên trên trang web.
Nắm vững các Lifecycle Methods trong React rất quan trọng để hiểu cách các component hoạt động và có thể tối ưu hóa hiệu suất ứng dụng của bạn. Tuy nhiên, trong React Hook, thay vì sử dụng các Lifecycle Methods, chúng ta sử dụng useEffect() để đạt được tác vụ tương tự.
