Lifecycle Components trong React

Trong React, Lifecycle Components là một khái niệm quan trọng giúp bạn hiểu cách các component được tạo ra, cập nhật, và loại bỏ trong suốt quá trình hoạt động của ứng dụng. Quản lý vòng đời của component hiệu quả sẽ giúp bạn xử lý các tác vụ như lấy dữ liệu từ API, xử lý sự kiện, và làm sạch tài nguyên khi component không còn sử dụng nữa.

1. Vòng đời của Class Components

Trước khi React Hooks ra đời, React chủ yếu sử dụng Class Components để quản lý các phương thức vòng đời. Một Class Component có một số phương thức đặc biệt được gọi tự động trong các giai đoạn khác nhau của vòng đời của component.

Các phương thức trong vòng đời của Class Components

1. constructor(props)
   • Phương thức này được gọi khi một instance của component được khởi tạo. Đây là nơi bạn có thể khởi tạo state và props.
   • Thường sử dụng để thiết lập giá trị ban đầu cho component.

constructor(props) {		
	  super(props);		
	  this.state = {		
	    count: 0		
	  };		
}		

2. componentDidMount()
   • Phương thức này được gọi ngay sau khi component đã được render lần đầu tiên và được gắn vào DOM. Đây là nơi thích hợp để thực hiện các tác vụ như:
     • Lấy dữ liệu từ API.
     • Đăng ký sự kiện.
     • Thực hiện các thay đổi không đồng bộ.

componentDidMount() {		
	  console.log("Component đã được render");		
}		

3. shouldComponentUpdate(nextProps, nextState)
   • Phương thức này cho phép bạn quyết định xem component có cần phải re-render hay không. Điều này giúp cải thiện hiệu suất của ứng dụng khi không phải luôn luôn render lại khi props hoặc state thay đổi.
   • Trả về true (render lại) hoặc false (không render lại).

shouldComponentUpdate(nextProps, nextState) {		
	  return nextState.count !== this.state.count;		
}		

4. componentDidUpdate(prevProps, prevState)
   • Phương thức này được gọi mỗi khi component được render lại, sau khi state hoặc props thay đổi.
   • Đây là nơi bạn có thể xử lý các tác vụ như:
     • Cập nhật DOM hoặc thực hiện các thay đổi sau khi dữ liệu đã thay đổi.

componentDidUpdate(prevProps, prevState) {		
	  if (this.state.count !== prevState.count) {		
	    console.log("State đã thay đổi");		
	  }		
}		

5. componentWillUnmount()
   • Phương thức này được gọi ngay trước khi component bị loại bỏ khỏi DOM. Đây là nơi bạn thực hiện các tác vụ làm sạch, ví dụ như:
     • Hủy đăng ký sự kiện.
     • Dừng các yêu cầu API.
     • Giải phóng bộ nhớ.

componentWillUnmount() {		
	  console.log("Component sẽ bị loại bỏ");		
}		

2. Vòng đời của Function Components với Hooks

Kể từ khi React giới thiệu Function Components và Hooks, vòng đời của components có thể được quản lý thông qua useEffect và các hooks khác. Các function components không có các phương thức vòng đời như class components, nhưng useEffect giúp bạn mô phỏng các hành vi tương tự.

Sử dụng useEffect trong Function Components

useEffect là hook quan trọng trong React, thay thế nhiều phương thức vòng đời của class components. Nó có thể thực hiện các tác vụ như gọi API, cập nhật DOM, xử lý sự kiện, và làm sạch tài nguyên.

1. Tương đương componentDidMount()
   • Khi bạn sử dụng useEffect mà không cung cấp dependency array (mảng phụ thuộc), hook này sẽ chạy chỉ một lần sau khi component được render lần đầu tiên, tương tự như componentDidMount() trong class components.

useEffect(() => {		
	  console.log("Component đã render lần đầu tiên");		
}, []);  // dependency array trống		

2. Tương đươngcomponentDidUpdate()
   • Nếu bạn muốn thực hiện một tác vụ mỗi khi props hoặc state thay đổi, bạn có thể truyền một dependency array với các giá trị mà bạn muốn theo dõi.

useEffect(() => {		
	  console.log("Component đã được cập nhật");		
}, [state]);  // Theo dõi sự thay đổi của state		

3. Tương đương componentWillUnmount()
   • Để thực hiện các tác vụ làm sạch khi component sẽ bị loại bỏ khỏi DOM, bạn có thể trả về một hàm trong useEffect. Hàm này sẽ được gọi trước khi component bị hủy.

useEffect(() => {		
	  // Các tác vụ khi component mount		
			
	  return () => {		
	    // Các tác vụ làm sạch khi component sẽ bị unmount		
	    console.log("Component sẽ bị loại bỏ");		
	  };		
}, []);  // dependency array trống		

3. So sánh vòng đời giữa Class Components và Function Components

4. Các Tình Huống Thực Tế

• Lấy dữ liệu từ API:
  • Trong class components, bạn sẽ sử dụng componentDidMount() để gọi API sau khi component render lần đầu. Trong function components, bạn sẽ sử dụng useEffect() với một mảng phụ thuộc trống.
• Quản lý sự kiện:
  • Trong class components, bạn sẽ đăng ký sự kiện trong componentDidMount() và hủy đăng ký trong componentWillUnmount(). Trong function components, bạn sẽ sử dụng useEffect() để làm điều này.
• Cập nhật dữ liệu:
  • Trong class components, componentDidUpdate() sẽ được gọi mỗi khi props hoặc state thay đổi. Trong function components, useEffect() có thể theo dõi các thay đổi của props hoặc state.

5. Kết luận

Quản lý vòng đời của component là một kỹ thuật quan trọng trong React để xử lý các tác vụ như lấy dữ liệu từ API, xử lý sự kiện, và làm sạch tài nguyên. Trong Class Components, bạn có các phương thức vòng đời rõ ràng, trong khi trong Function Components, bạn sử dụng useEffect để thay thế các phương thức này. Việc hiểu rõ vòng đời của component sẽ giúp bạn tối ưu hóa hiệu suất và xử lý các tác vụ một cách hiệu quả trong quá trình phát triển ứng dụng React.