Warning: file_get_contents(/data/phpspider/zhask/data//catemap/4/jquery-ui/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript React useEffect清理功能是否多次运行?_Javascript_Reactjs_React Hooks - Fatal编程技术网

Javascript React useEffect清理功能是否多次运行?

Javascript React useEffect清理功能是否多次运行?,javascript,reactjs,react-hooks,Javascript,Reactjs,React Hooks,这里有一个角落 举个例子 useEffect(() => { function handleStatusChange(status) { setIsOnline(status.isOnline); } ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange); // Specify how to clean up after this effect: ret

这里有一个角落

举个例子

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
的原始显式执行是否会变得更加困难?比如说,我想
组件将挂载时订阅
,而只有
组件将卸载时才运行
取消订阅

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

取消订阅Friendstatus
每次重新渲染都会运行

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

要改善这一点,请仅在
props.friend.id
更改时运行效果。 这可以通过将其作为依赖项添加到
useffect()
中来实现

这是否会使实现componentWillMount和componentWillUnmount的原始显式执行变得更加困难?比如说,我想在componentWillMount时订阅,而只在ComponentUnmount时运行unsubscribe

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

订阅使用资源(websocket或observer)。当在
期间取消订阅组件时,将卸载
只是取消订阅您的
props.friend.id
的最新值

旧订阅会发生什么情况?没有释放。
因此,存在内存泄漏

根据文档,这就是为什么React还会在下次运行效果之前清除上一次渲染的效果。因此,是的,它将在每个渲染上运行。也许
订阅
取消订阅
是一个不好的例子,它反对
延迟打开
提前关闭
,但是假设我只想在
componentWillMount
上执行某些操作,并且只想在
componentWillUnmount
上执行某些操作?如果您只想运行一次效果,只需添加
[]
作为第二个参数。但是
once
没有指定“何时”运行?我希望它在“开始”运行,在“结束”运行另一次@JamesLin传递一个空数组
[]
只会在装载和卸载时运行效果。您可以在本节中阅读更多关于这一点的内容:现在就有意义了。我把自己弄糊涂了。
useEffect(
  () => { /* subscription */ }
  , [props.friend.id] // add as dependency
)