知道用户何时离开组件 - React答案

【问题标题】：Know when a user leaves component - React知道用户何时离开组件 - React
【发布时间】：2020-09-24 17:15:54
【问题描述】：

我正在构建一个使用 React、Redux、Firebase 和函数 onSnapshot() 的应用程序。我读到降低成本和更新服务器是在用户离开组件时取消订阅 onSnapshot 的好习惯。

所以我的问题是：我如何知道用户何时离开组件或路径以对取消订阅 onSnapshot 做出反应？

谢谢！

【问题讨论】：

【解决方案1】：

componentWillUnmount() { // your Code here }

“从 DOM 中移除组件时调用此方法”（来自：https://reactjs.org/docs/react-component.html）。希望这就是您想要的。

【讨论】：

【解决方案2】：

在 React 类组件中，使用 componentDidMount 和 componentWillUnmount 添加和删除侦听器或订阅：

class MyComponent extends React.Component {
  componentDidMount() {
    // Add listeners, subscriptions, etc.
  }

  componentWillUnmount() {
    // Remove listeners, subscriptions, etc.
  }

  render() {
    ...
  }
}

在 React 函数组件中，使用 useEffect 钩子来做同样的事情。一定要在useEffect的依赖数组（第二个参数）中添加正确的依赖。

const MyComponent = (props) => {
  useEffect(() => {
    // Add listeners, subscriptions, etc.

    return () => {
      // This function will be called just before the component unmounts.
      // Remove listeners, subscriptions, etc.       
    };
  }, [/* Dependency array */]);

  return (...);
};

【讨论】：