Khám phá React: từ vòng đời của Component đến sức mạnh của Useeffect Hook

Bạn đã bao giờ tự hỏi điều gì khiến React trở thành một thư viện Javascript UI phổ biến thay vì là một framework? Hãy cùng tìm hiểu về vòng đời của component trong React và cách thức hoạt động của useEffect hook - một công cụ mạnh mẽ giúp quản lý các phản ứng phụ và hiệu ứng trong ứng dụng của bạn.

Bạn có thể đã nghe nói rằng React là một thư viện, nhưng điều gì thực sự khiến nó trở thành một thư viện chứ không phải là một framework? Một framework thường cung cấp mọi thứ bạn cần để xây dựng một ứng dụng; quản lý trạng thái, định tuyến,...

Mặt khác, một thư viện tập trung vào Giao diện Người dùng và cho phép bạn tự do sử dụng các công cụ bổ sung để hoàn thành dự án của mình chẳng hạn như redux hoặc context để quản lý trạng thái, react-router để định tuyến, v.v. và đó chính xác là những gì react thực hiện.

• React là một thư viện javascript sử dụng các component có thể tái sử dụng tùy chỉnh để giúp việc xây dựng UI nhanh hơn và có cấu trúc tốt. Khả năng sử dụng lại này cho phép bạn cập nhật một phần cụ thể của ứng dụng mà không cần cập nhật riêng lẻ ở mọi nơi khác.
• React cho phép các nhà phát triển viết cả logic và cấu trúc trên cùng một trang bằng cách sử dụng cú pháp JSX, giúp code dễ đọc và làm việc hơn.
• React sử dụng DOM Ảo (một đại diện trong bộ nhớ của DOM thực tế) để cập nhật UI một cách hiệu quả. Khi dữ liệu thay đổi, React chỉ cập nhật phần UI đã thay đổi thay vì tải lại toàn bộ trang.

Vòng đời của Component trong React: Tìm hiểu các giai đoạn phát triển

Các phương thức này thuộc về vòng đời của một component React dựa trên lớp và mỗi phương thức chạy tại các thời điểm khác nhau trong "cuộc đời" của một component. Về cơ bản, chúng là một cách để cho code của bạn biết khi nào cần thực hiện một hành động cụ thể tại mỗi thời điểm. Các tên gọi dễ dàng giải thích giai đoạn mà mỗi phương thức đại diện.

1. componentDidMount

Phương thức này chạy một lần ngay sau khi component được hiển thị lần đầu tiên, tức là ngay sau khi component được thêm vào DOM. Đó là thực hiện bất kỳ hành động nào sẽ chỉ xảy ra khi component xuất hiện lần đầu tiên. Cách sử dụng bao gồm; Tìm nạp dữ liệu từ API, đặt bộ hẹn giờ hoặc khoảng thời gian, thêm trình lắng nghe sự kiện, v.v. Ví dụ về cách sử dụng Tìm nạp dữ liệu từ API khi component tải:

class UserProfile extends React.Component {
  state = { user: null };

  componentDidMount() {
    fetch('https://api.frontendfirefighter.com/user/1')
      .then((response) => response.json())
      .then((data) => this.setState({ user: data }));
  }

  render() {
    const { user } = this.state;
    return <div>{user ? <h1>{user.name}</h1> : <p>Loading...</p>}</div>;
  }
}

Trong ví dụ này, componentDidMount() kích hoạt một lệnh gọi API để tìm nạp dữ liệu người dùng ngay khi component xuất hiện.

2. componentDidUpdate

Phương thức này chạy mỗi khi component cập nhật, tức là bất cứ khi nào props hoặc state thay đổi. Nó hữu ích khi bạn cần phản ứng với những thay đổi trong props hoặc state và thực hiện một số hành động sau khi hiển thị lại. Cách sử dụng bao gồm; Tìm nạp dữ liệu mới nếu một số props nhất định đã thay đổi, cập nhật DOM để phản hồi với dữ liệu mới, kích hoạt các tác dụng phụ dựa trên state hoặc props thay đổi. Ví dụ về cách sử dụng: Tìm nạp lại dữ liệu khi một prop thay đổi:

class UserProfile extends React.Component {
  componentDidUpdate(prevProps) {
    if (this.props.userId !== prevProps.userId) {
      fetch(`https://api.frontendfirefighter.com/user/${this.props.userId}`)
        .then((response) => response.json())
        .then((data) => console.log('New user data:', data));
    }
  }

  render() {
    return <h1>User ID: {this.props.userId}</h1>;
  }
}

Trong ví dụ này, componentDidUpdate() kiểm tra xem userId prop đã thay đổi hay chưa. Nếu có, nó sẽ tìm nạp dữ liệu người dùng mới.

3. componentWillUnmount

Phương thức này chạy ngay trước khi component bị xóa khỏi DOM. Điều cần thiết là dọn dẹp tài nguyên để tránh rò rỉ bộ nhớ, chẳng hạn như xóa bộ hẹn giờ hoặc xóa trình lắng nghe sự kiện. Nó chạy ngay trước khi component bị unmount và bị xóa khỏi DOM. Cách sử dụng bao gồm; xóa bộ hẹn giờ hoặc khoảng thời gian, xóa trình lắng nghe sự kiện, hủy yêu cầu mạng. Ví dụ về cách sử dụng: Xóa khoảng thời gian khi component unmount:

class Timer extends React.Component {
  componentDidMount() {
    this.timer = setInterval(() => {
      console.log('Timer running...');
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timer);  // Cleanup the interval
    console.log('Timer stopped!');
  }

  render() {
    return <h1>Timer Running</h1>;
  }
}

Quản lý vòng đời Component hiệu quả với UseEffect Hook

Với việc chuyển đổi sang các functional component, vòng đời component của react hiện được quản lý bằng cách sử dụng useEffect hook.

UseEffect là một hook của react cho phép bạn chạy bất kỳ tác dụng phụ hoặc phản ứng nào sau khi component hiển thị, hiển thị lại hoặc trước khi unmount.

Nó nhận hai tham số:

• Một hàm callback chứa phản ứng hoặc tác dụng phụ mà bạn muốn chạy và
• Một mảng phụ thuộc kiểm soát thời điểm nó chạy.

`useEffect(() =>

// callback function

, [dependency array]);`

Không có phần tử phụ thuộc: Hiệu ứng chạy sau mỗi lần render.

Mảng rỗng []: Hiệu ứng chỉ chạy một lần, giống như componentDidMount().

Phần tử phụ thuộc cụ thể (ví dụ: [count]): Hiệu ứng chỉ chạy khi state hoặc prop đó thay đổi.

Sau đây là chi tiết vòng đời component với UseEffect:

1. componentDidMount

useEffect(() => {
  console.log('I understand useEffect better!');
}, []);  

Điều này sẽ chỉ ghi vào console một lần, tức là khi component được mount.

2. componentDidUpdate

import { useEffect, useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  // This useEffect runs only when 'count' changes
  useEffect(() => {
    console.log(`I read this article ${count} times`);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Read it Again</button>
    </div>
  );
}

3. componentWillUnmount

useEffect(() => {
  document.addEventListener('mousedown', handleClickOutside);

  return () => {
    document.removeEventListener('mousedown', handleClickOutside);
  };
}, []); // Runs every time 'isOpen' changes

}

UseEffect này thêm một trình lắng nghe sự kiện mousedown vào tài liệu.

Trình lắng nghe sự kiện chạy bất cứ khi nào người dùng nhấp vào bất kỳ đâu trên trang. Nó kích hoạt hàm handleClickOutside (Trong code đầy đủ, nó kiểm tra xem người dùng có nhấp chuột ra bên ngoài modal hay không).

Khi nào nó xảy ra: Trình lắng nghe sự kiện được thêm vào ngay sau khi component hiển thị, giống như componentDidMount.

Trong các component lớp, componentWillUnmount chạy ngay trước khi component bị xóa khỏi DOM. Hàm dọn dẹp bên trong useEffect phục vụ cùng một mục đích ở đây:

Tại sao chúng ta cần dọn dẹp?

Nếu chúng ta không xóa trình lắng nghe sự kiện, nó sẽ tiếp tục chạy ngay cả sau khi component bị unmount. Điều này có thể gây rò rỉ bộ nhớ hoặc hành vi không mong muốn.

Khi nào nó xảy ra: React gọi hàm dọn dẹp này khi component sắp bị unmount.

Chúc các bạn lập trình vui vẻ!