Xin chào các bạn, trong phần hướng dẫn này, tôi sẽ chỉ cho các bạn mọi thứ bạn cần biết để sử dụng hàm useEffect của React như một người chuyên nghiệp.

Sơ lược về lịch sử

Trước khi có useEffect , có các phương pháp vòng đời, cụ thể là:

1. componentDidMount
2. componentDidUpdate
3. componentWillUnmount

componentDidUpdate(prevProps, prevState) {
  if (prevProps.foo !== this.props.foo) {/* do something */} 
  if (prevState.bar !== this.state.bar)  {/* do something else */}
}

Với các phương thức vòng đời này, chúng ta có thể xử lý một cách đáng tin cậy bất kỳ thay đổi nào đối với trạng thái của thành phần, vậy tại sao lại thay đổi thành useEffect ?

Nhập các thành phần không trạng thái của React

Tại một thời điểm (tôi tin là vào đầu năm 2016), nhóm React đã đưa ra quyết định tạo ra các thành phần React có thể được khởi tạo chỉ với một hàm Javascript thông thường, cũ kỹ. Vì thế:

import React from "react";
function MyFunc() {
  return <div>Hey!</div>
}

Nhập React.useEffect

Cách tiếp cận mới để quản lý các thay đổi trạng thái xuất hiện dưới dạng một hàm useEffect được đưa ra bởi thư viện React. Vậy làm cách nào để tạo lại các phương thức componentDidMount , componentDidUpdate và componentWillUnmount yêu thích của chúng ta ? Hãy mở rộng chức năng không trạng thái trước đó của chúng tôi:

import React from "react";
function MyFunc(props) {
const [bar setBar] = React.useState(null);
  
  React.useEffect(() => {
    console.log("componentDidMount");
    return () => {
      console.log("componentDidUnmount")
    }
  }, []);
  
  React.useEffect(() => {
    console.log("componentDidUpdate when 'bar' changes");
  }, [bar]);
React.useEffect(() => {
    console.log("componentDidUpdate when 'props.foo' changes");
  }, [props.foo]);
return <div>Hey!</div>
}

Một điều khác mà chúng tôi đã thêm vào ví dụ này, React.useState, một trạng thái hook, nằm ngoài phạm vi của hướng dẫn này, nhưng hãy tìm hiểu thêm về nó tại đây !

Vượt xa quản lý vòng đời

Thật tuyệt khi chúng ta có thể quản lý trạng thái của một thành phần cũng như với các phương thức vòng đời trước đó. Giữa sự đơn giản và khả năng tái sử dụng của các hàm không trạng thái và hàm React.useEffect, một mô hình mới đã có sẵn cho chúng ta: các hàm trạng thái có thể tái sử dụng, hay thường được đặt tên hơn: móc tùy chỉnh .

Một độc giả hiểu biết như bạn có thể nhận thấy rằng với useEffect, chúng ta không thể truy cập thuộc tính prevProps hoặc prevState như chúng ta có thể làm trước đây. Đừng sợ! Đọc giải pháp cho điều đó ở đây . Lý do giải pháp này hoạt động là vì React.useRef không kích hoạt kết xuất của thành phần. Ngoài ra, useEffect không có phụ thuộc kích hoạt mỗi khi có kết xuất lại thành phần bất kể thay đổi trạng thái nào đã kích hoạt nó.

Xin chào các móc tùy chỉnh

Thực sự không có ví dụ cơ sở nào tốt hơn cho hook tùy chỉnh hơn ví dụ mà React chia sẻ trong tài liệu chính thức của họ ở đây . Hãy bắt đầu ở cuối ví dụ và di chuyển lên trên:

function FriendListItem(props) {
  const isOnline = useFriendStatus(props.friend.id);
  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}

import React, { useState, useEffect } from 'react';

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}

Phần kết luận

Trong hướng dẫn này, chúng tôi đã xem xét:

1. Cách chúng tôi quản lý vòng đời của một thành phần trước khi sử dụng
2. Cách chúng ta có thể sử dụng useEffect để quản lý hiệu quả vòng đời của một thành phần
3. Cách chúng ta có thể tận dụng khả năng tái sử dụng của các hàm không trạng thái của React và useEffect để tạo các hàm trạng thái có thể tái sử dụng.