我是否正确使用了 useEffect 和取消订阅？答案

【问题标题】：Am I using useEffect and unsubscribing properly?我是否正确使用了 useEffect 和取消订阅？
【发布时间】：2020-12-01 19:18:01
【问题描述】：

我正在尝试学习我开始学习的 useState 和 useEffect，但当 React 说我有内存泄漏时，我就卡住了。老实说，我之前什至没有意识到我造成了内存泄漏，尽管查看了React documentation，但我仍然不完全确定是什么原因造成的。

如果有人不介意查看我在下面为非常简单的导航栏编写的内容，我将不胜感激。

import React, { useEffect, useState } from 'react';
import { useAuth } from '../context/auth';
import Login from '../pages/Login';
import { Button, Nav, Navbar } from 'react-bootstrap';

function NavBar(props) {
  const { setAuthTokens } = useAuth();
  const { authTokens } = useAuth();
  const [isLoggedIn, setLoggedIn] = useState(false);

  useEffect(() => {
    if (authTokens) setLoggedIn(true);

    return function cleanup() {
      setLoggedIn();
    };
  }, [isLoggedIn, authTokens]);

  function logOut() {
    setAuthTokens();
  }

  return isLoggedIn ? (
    <div>
      <Navbar bg="light" expand="lg">
        <Navbar.Brand href='/'>The System</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="mr-auto">
            <Nav.Link href='/dashboard'>Dashboard</Nav.Link>
            <Button onClick={logOut}>Log out</Button>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    </div>
  ) : (
    <div>
      <Navbar bg="light" expand="lg">
        <Navbar.Brand href='/'>The System</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="mr-auto">
            <Login />
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    </div>
  );
}

export default NavBar;

【问题讨论】：

您正在将状态 (setLoggedIn) 设置为清理功能。当这个清理函数被调用并且你的 setLoggedIn 函数被调用时，组件已经被移除（卸载），这就是为什么 react 会给出内存泄漏错误。
问题是，当我将它包含在清理功能中时，我没有收到内存泄漏错误。使用与我粘贴的代码完全相同的代码，一切正常。我只是不明白它为什么会起作用，而这正是我担心的。

标签： reactjs use-effect unsubscribe

【解决方案1】：

useEffect中的return函数相当于componentWillUnmount。所以在卸载的情况下，你应该调用 logout 方法（如果你没有持久化会话）。

【讨论】：

谢谢，这有助于更有意义。