反应使用效果清理函数运行多次?

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每次重新渲染都会运行。

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

若要改进此效果，请仅在props.friend.id更改时运行效果。 这可以将其作为依赖项添加到useEffect().

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

是不是更难实现 componentWillMount 和 componentWillUnmount 的原始显式执行？比如说，我想在 componentWillMount 时订阅，并且只在 componentWillUnMount 时运行取消订阅？

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

订阅使用资源(Websocket 或观察器(。在componentWillUnmount期间取消订阅时，仅取消订阅props.friend.id的最新值。

旧订阅会发生什么情况？没有释放。 因此，您有内存泄漏。