在 useEffect 中更新依賴項時調用卸載

Question

我已經從useEffect掛鈎中的消息服務訂閱了一些更新。 通過 react hooks 文檔和資源，我無法用我的代碼找到一些觀察結果的答案。 這是我的代碼片段：

import React, { useState, useEffect } from "react";
import { messageService } from "../_services";

function App() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const subscription = messageService.onMessage().subscribe(message => {
      setCount(count + 1);
    });
    return () => {
      console.log("unmount");
      subscription.unsubscribe();
    };
  }, [count]);

  function sendMessage() {
    messageService.sendMessage("message");
  }

  return (
    <div className="jumbotron">
      <button onClick={sendMessage} className="btn btn-primary mr-2">
        Send Message
      </button>
      {count}
    </div>
  );
}

export { App };

現在我無法理解兩種行為：

1. 由於useEffect鈎子已count為依賴項，因此我應該遇到無限循環問題，但我觀察到調用了unmount 。 React 是否會在預期無限循環時卸載App組件？ 如果這樣做的話，我在任何地方都找不到提到的這個
2. 即使調用了unmount ，仍保留count的值。 這怎么可能

我知道解決它的一種方法是，只要有計數更新，我就需要使用useRef來保留count並將其從鈎子的依賴項中刪除，同時強制更新。

我正在尋找的是對上述兩個問題的答案，以及是否有更好的方法提前謝謝。

工作應用程序的 Stackblitz 鏈接，以防您想嘗試

Answer 1

清理效果不僅在組件卸載之前進行清理， 而且如果一個組件多次渲染（就像他們通常做的那樣），前一個效果在執行下一個效果之前被清理。

此外，在您的情況下， count不應該在useEffect中，因為您可以使用功能更新。

useEffect(() => {
  const subscription = messageService.onMessage().subscribe((message) => {
    setCount((p) => p + 1);
  });
  return () => {
    subscription.unsubscribe();
  };
}, []);

即使調用了卸載，也會保留 count 的值。 這怎么可能？

那是由於 關閉。