React useEffect 清理功能多次运行? [英] React useEffect clean up function runs multiple times?

问题描述

在这里反应钩子菜鸟...

给出这个例子

useEffect(() => {函数handleStatusChange(状态){setIsOnline(status.isOnline);}ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);//指定此效果后如何清理:返回函数清理(){ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);};});

来自文档

<块引用>

React 在组件卸载时执行清理.但是，正如我们之前所了解的，效果在每次渲染时都会运行，而不仅仅是一次.这就是为什么 React 在下次运行效果之前也会清理上一次渲染的效果.

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

扩展我的问题:

如果 unsubscribeFromFriendStatus 每次都运行，并且跳过它的唯一方法是使用可选的第二个参数......那么它是否会更难实现 componentWillMount 和 componentWillUnmount?比如说，我想在 componentWillMount 时subscribe，并且只在 componentWillUnMount?

时运行 unsubscribe

解决方案

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

unsubscribeFromFriendStatus 运行每次重新渲染.

每次重新渲染，即使 props.friend.id 从未改变，它也会取消订阅并重新订阅.

为了改善这一点，仅在props.friend.id改变时运行效果.这可以通过将其添加为 useEffect() 的依赖项来实现.

useEffect(() =>{/* 订阅 */}, [props.friend.id]//添加为依赖)

<块引用>

是不是更难实现componentWillMount和componentWillUnmount原来的显式执行?比如说，我想在 componentWillMount 时订阅，只有在 componentWillUnMount 时才运行 unsubscribe?

使用 props.friend.id 的旧值来维护旧订阅是没有意义的.

订阅使用资源(websocket 或观察者).在 componentWillUnmount 期间取消订阅时，只会取消订阅您的 props.friend.id 的最新值.

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

React hook noob here...

Given this example

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);
    };
  });

From the doc

React performs the cleanup when the component unmounts. However, as we learned earlier, effects run for every render and not just once. This is why React also cleans up effects from the previous render before running the effects next time.

Does that mean unsubscribeFromFriendStatus only gets run when once when component unmounts or every render?

Extending my question:

if unsubscribeFromFriendStatus gets run every time, and the only way to skip it is by using optional second argument... then doesn't it make it harder to implement the original explicit execution of componentWillMount and componentWillUnmount? Say, I want to subscribe when componentWillMount, and only run unsubscribe when componentWillUnMount?

解决方案

Does that mean unsubscribeFromFriendStatus only gets run when once when component unmounts or every render?

unsubscribeFromFriendStatus runs every re-render.

Every re-render, even if props.friend.id never changed, it unsubscribes and resubscribes.

To improve this, run the effect only when props.friend.id changed. This is possible by adding it as a dependency to useEffect().

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

doesn't it make it harder to implement the original explicit execution of componentWillMount and componentWillUnmount? Say, I want to subscribe when componentWillMount, and only run unsubscribe when componentWillUnMount?

It doesn't make sense to maintain old subscriptions using old values of props.friend.id.

A subscription uses a resource (websocket or observer). When unsubscribing during componentWillUnmount is only unsubscribing the latest value of your props.friend.id.

What happens to the older subscriptions? Not freed. Thus, you have a memory leak.

这篇关于React useEffect 清理功能多次运行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！