React useEffect 清理功能多次运行?

IT技术 javascript reactjs react-hooks
2021-05-03 12:02:25

在这里react-hooks菜鸟......

鉴于这个例子

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仅在组件卸载或每次渲染时运行一次?

扩展我的问题:

ifunsubscribeFromFriendStatus每次都运行,而跳过它的唯一方法是使用可选的第二个参数......那么它是否会更难实现componentWillMountand的原始显式执行componentWillUnmount说,我想subscribe什么时候componentWillMount,只unsubscribecomponentWillUnMount什么时候运行

1个回答

这是否意味着unsubscribeFromFriendStatus仅在组件卸载或每次渲染时运行一次?

unsubscribeFromFriendStatus运行每次重新渲染

每次重新渲染,即使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.

旧订阅会怎样?没有被释放。因此,您有内存泄漏