如何卸载 React 函数式组件？

Question

我已经构建了几个模式作为 React 功能组件。它们是通过模态关联上下文中的 isModalOpen 布尔值属性 shown/hidden。效果很好。

现在，由于各种原因，一位同事需要我重构这段代码，而不是将模态的可见性控制在更高一级。这是一些示例代码：

import React, { useState } from 'react';
import Button from 'react-bootstrap/Button';
import { UsersProvider } from '../../../contexts/UsersContext';
import AddUsers from './AddUsers';

const AddUsersLauncher = () => {
  const [showModal, setShowModal] = useState(false);

  return (
    <div>
      <UsersProvider>
        <Button onClick={() => setShowModal(true)}>Add Users</Button>
        {showModal && <AddUsers />}
      </UsersProvider>
    </div>
  );
};

export default AddUsersLauncher;

这一切最初都很好用。呈现一个按钮，当按下该按钮时，将显示模式。

问题在于如何隐藏它。在我只是在减速器中将 isModalOpen 设置为 false 之前。

今天早些时候，当我与我的同事快速交谈时，他说上面的代码可以工作，我不必将任何东西传递给 AddUsers。我在想，虽然我需要将 setShowModal 函数传递到组件中，因为它可以被调用以隐藏模态。

但我愿意接受这样一种可能性，即我没有看到更简单的方法来执行此操作。可能有吗？

Answer 1

要在卸载时调用某些东西，您可以使用 useEffect。无论您在 useEffect 中 return 什么，都将在卸载时调用。例如，在您的情况下

const AddUsersLauncher = () => {
  const [showModal, setShowModal] = useState(false);


  useEffect(() => {
    return () => {
      // Your code you want to run on unmount.
    };
  }, []); 


  return (
    <div>
      <UsersProvider>
        <Button onClick={() => setShowModal(true)}>Add Users</Button>
        {showModal && <AddUsers />}
      </UsersProvider>
    </div>
  );
};

useEffect 的第二个参数接受一个数组，它比较元素的值以检查是否再次调用useEffect。在这里，我传递了空数组 []，因此，它只会调用一次 useEffect。

如果你在数组中传递了其他东西，比方说，showModal，那么只要 showModal 值发生变化，useEffect 就会调用，并且会调用 returned 函数如果指定。

Answer 2

如果你想在 AddUsersLauncher 中保留 showModal 作为状态变量并在 AddUsers 中更改它，那么是的，你必须传递 setShowModal 的引用至 AddUsers。 React 中的状态管理在双向数据流中可能会变得混乱，所以我建议您查看 Redux 以存储和更改多个组件共享的状态

如何卸载 React 函数式组件？

How to Unmount React Functional Component?

reactjs

react-state