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 泄漏。