时间戳

首页 > 解决方案 > 由于 firebase，我的 React 应用程序中的内存泄漏以及如何避免它？

javascript - 由于 firebase，我的 React 应用程序中的内存泄漏以及如何避免它？

问题描述

我正在开发的应用程序在登录时显示一个用户仪表板，并带有一个用于导航的侧边栏。它使用火力基地。我从我的firebase中获取大部分数据async componentDidMount()并将数据存储在我的组件状态中。完成所有提取需要几秒钟。但是，如果用户决定在获取完成之前导航到另一个屏幕，我会得到

无法在未安装的组件上调用 setState

警告（如预期）。所以我做了一些挖掘并发现

if(this.isMounted()) this.setState({updates:updates})

使警告消失，但后来我也发现 usingisMounted是一种反模式。

关于这个问题的官方文档建议我们自己跟踪挂载状态，方法是_isMounted=true在. 我认为实现这一点的唯一方法是通过组件状态中的变量。事实证明，setState 在 componentWillUnmount 中不起作用。[问题1]（我尝试调用一个外部函数，然后从该函数中设置状态变量。没有用。）componentDidMountcomponentWillUnmountcomponentWillUnmount

该文档提出了另一种方法，即使用可取消的承诺。但我对如何通过await firebase电话实现这一目标一无所知。我也找不到任何方法来阻止 Firebase 呼叫中途。[问题2]

所以现在我被警告和数据泄露所困扰。

一个。我该如何解决这个问题？
湾。这是我需要认真对待的事情吗？

标签： javascriptreactjsfirebase

解决方案

如果存在卸载组件的风险，最好在请求完成时检查组件是否仍然挂载。

您不需要放入_isMounted组件状态，因为它不会用于渲染。您可以将其直接放在组件实例上。

例子

class MyComponent extends React.Component {
  state = { data: [] };

  componentDidMount() {
    this._isMounted = true;

    fetch("/example")
      .then(res => res.json())
      .then(res => {
        if (this._isMounted) {
          this.setState({ data: res.data });
        }
      });
  }

  componentWillUnmount() {
    this._isMounted = false;
  }

  render() {
    // ...
  }
}

推荐阅读