React useEffect clean up function 運行多次？

Question

在這里反應鈎子菜鳥......

鑒於這個例子

useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    // Specify how to clean up after this effect:
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

從文檔

React 在組件卸載時執行清理。 然而，正如我們之前所了解的，效果會為每次渲染運行，而不僅僅是一次。 這就是為什么 React 還會在下次運行效果之前清理上一次渲染中的效果。

這是否意味着unsubscribeFromFriendStatus僅在組件卸載或每次渲染時運行一次？

擴展我的問題：

如果unsubscribeFromFriendStatus每次都運行，並且跳過它的唯一方法是使用可選的第二個參數......那么它不會使實現componentWillMount和componentWillUnmount的原始顯式執行變得更加困難嗎？ 說，我想在componentWillMount時subscribe ，並且只在componentWillUnMount時unsubscribe ？

Answer 1

這是否意味着unsubscribeFromFriendStatus僅在組件卸載或每次渲染時運行一次？

unsubscribeFromFriendStatus運行每個 re-render 。

每次重新渲染，即使props.friend.id從未更改，它也會取消訂閱並重新訂閱。

要改善這一點，請僅在props.friend.id更改時運行效果。 這可以通過將其作為依賴項添加到useEffect()來實現。

useEffect(
  () => { /* subscription */ }
  , [props.friend.id] // add as dependency
)

不是更難實現componentWillMount和componentWillUnmount的原始顯式執行嗎？ 說，我想在componentWillMount時訂閱，並且只在componentWillUnMount時運行unsubscribe？

使用props.friend.id的舊值來維護舊訂閱是沒有意義的。

訂閱使用資源（websocket 或觀察者）。 在componentWillUnmount期間退訂時，只是退訂您的props.friend.id的最新值。

舊訂閱會發生什么？ 沒有被釋放。 因此，您有一個memory 泄漏。