phản ứng móc sử dụngEffect () dọn dẹp chỉ cho componentWillUnmount?

Hãy để tôi giải thích kết quả của mã này để hỏi vấn đề của tôi một cách dễ dàng.

const ForExample = () => {
    const [name, setName] = useState('');
    const [username, setUsername] = useState('');

    useEffect(() => {
        console.log('effect');
        console.log({
            name,
            username
        });

        return () => {
            console.log('cleaned up');
            console.log({
                name,
                username
            });
        };
    }, [username]);

    const handleName = e => {
        const { value } = e.target;

        setName(value);
    };

    const handleUsername = e => {
        const { value } = e.target;

        setUsername(value);
    };

    return (
        <div>
            <div>
                <input value={name} onChange={handleName} />
                <input value={username} onChange={handleUsername} />
            </div>
            <div>
                <div>
                    <span>{name}</span>
                </div>
                <div>
                    <span>{username}</span>
                </div>
            </div>
        </div>
    );
};

Khi thú ForExample componentcưỡi, 'hiệu ứng' sẽ được ghi lại. Điều này có liên quan đến componentDidMount().

Và bất cứ khi nào tôi thay đổi đầu vào tên, cả 'hiệu ứng' và 'dọn dẹp' sẽ được ghi lại. Ngược lại, sẽ không có thông báo nào được ghi lại bất cứ khi nào tôi thay đổi đầu vào tên người dùng vì tôi đã thêm vào [username]tham số thứ hai của useEffect(). Điều này liên quan đếncomponentDidUpdate()

Cuối cùng, khi các ForExample componentlần ngắt kết nối, 'đã dọn dẹp' sẽ được ghi lại. Điều này có liên quan đến componentWillUnmount().

Tất cả chúng ta đều biết điều đó.

Tóm lại, 'đã dọn dẹp' được gọi bất cứ khi nào thành phần được hiển thị lại (bao gồm cả việc ngắt kết nối)

Nếu tôi muốn làm cho thành phần này chỉ ghi nhật ký 'đã dọn dẹp' tại thời điểm nó được ngắt kết nối, tôi chỉ cần thay đổi tham số thứ hai của useEffect()thành [].

Nhưng Nếu tôi thay đổi [username]thành [], ForExample componentkhông còn triển khai componentDidUpdate()đầu vào tên nữa.

Điều tôi muốn làm là làm cho thành phần chỉ hỗ trợ componentDidUpdate()cho việc nhập tên và componentWillUnmount(). (chỉ ghi nhật ký 'đã dọn dẹp' tại thời điểm thành phần đang được ngắt kết nối)

Vì quá trình dọn dẹp không phụ thuộc vào username, bạn có thể đặt quá trình dọn dẹp trong một vùng riêng biệt useEffectđược cung cấp một mảng trống làm đối số thứ hai.

Thí dụ

const { useState, useEffect } = React;

const ForExample = () => {
  const [name, setName] = useState("");
  const [username, setUsername] = useState("");

  useEffect(
    () => {
      console.log("effect");
    },
    [username]
  );

  useEffect(() => {
    return () => {
      console.log("cleaned up");
    };
  }, []);

  const handleName = e => {
    const { value } = e.target;

    setName(value);
  };

  const handleUsername = e => {
    const { value } = e.target;

    setUsername(value);
  };

  return (
    <div>
      <div>
        <input value={name} onChange={handleName} />
        <input value={username} onChange={handleUsername} />
      </div>
      <div>
        <div>
          <span>{name}</span>
        </div>
        <div>
          <span>{username}</span>
        </div>
      </div>
    </div>
  );
};

function App() {
  const [shouldRender, setShouldRender] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setShouldRender(false);
    }, 5000);
  }, []);

  return shouldRender ? <ForExample /> : null;
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

bạn có thể sử dụng nhiều hơn một lần sử dụng

ví dụ: nếu biến của tôi là data1, tôi có thể sử dụng tất cả điều này trong thành phần của mình

useEffect( () => console.log("mount"), [] );
useEffect( () => console.log("will update data1"), [ data1 ] );
useEffect( () => console.log("will update any") );
useEffect( () => () => console.log("will update data1 or unmount"), [ data1 ] );
useEffect( () => () => console.log("unmount"), [] );

function LegoComponent() {

  const [lego, setLegos] = React.useState([])

  React.useEffect(() => {
    let isSubscribed = true
    fetchLegos().then( legos=> {
      if (isSubscribed) {
        setLegos(legos)
      }
    })
    return () => isSubscribed = false
  }, []);

  return (
    <ul>
    {legos.map(lego=> <li>{lego}</li>)}
    </ul>
  )
}

Trong đoạn mã trên, hàm fetchLegos trả về một lời hứa. Chúng tôi có thể "hủy bỏ" lời hứa bằng cách có một điều kiện trong phạm vi sử dụngEffect, ngăn ứng dụng thiết lập trạng thái sau khi thành phần đã được ngắt kết nối.

Cảnh báo: Không thể thực hiện cập nhật trạng thái React trên một thành phần chưa được gắn kết. Đây là điều không cần thiết, nhưng nó chỉ ra sự rò rỉ bộ nhớ trong ứng dụng của bạn. Để khắc phục, hãy hủy tất cả các đăng ký và tác vụ không đồng bộ trong chức năng dọn dẹp useEffect.

useEffect được tách biệt trong phạm vi riêng của nó và được kết xuất tương ứng. Hình ảnh từ https://reactjs.org/docs/hooks-custom.html

Thay vì tạo quá nhiều hàm và phương thức phức tạp, những gì tôi làm là tôi tạo một trình lắng nghe sự kiện và tự động thực hiện gắn kết và ngắt kết nối cho tôi mà không phải lo lắng về việc thực hiện thủ công. Đây là một ví dụ.

//componentDidMount
useEffect( () => {

    window.addEventListener("load",  pageLoad);

    //component will unmount
    return () => {
       
        window.removeEventListener("load", pageLoad);
    }

 });

Bây giờ phần này đã xong, tôi chỉ cần chạy bất cứ thứ gì tôi muốn từ hàm pageLoad như thế này.

const pageLoad = () =>{
console.log(I was mounted and unmounted automatically :D)}