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
)