使用React Lifecycle切换可见性的正确方法

Question

[我正在尝试使用React制作Modal组件，并且我想使用React Hook捕获像componentDidMount和componentWillUnmount这样的生命周期。

首先，我使用isOpen道具制作了一个模态。像许多Modal库一样。但是这样一来，我无法正确把握生命周期。因此，我制作了另一个没有isOpen属性的模态。只显示和隐藏有条件的状态。好的，我想我可能很冗长，-很难理解，所以我附上了我的代码。

沙盒https://codesandbox.io/s/nifty-dijkstra-q6o69

import React, { useState, useEffect } from "react";

// Modal 1
function Modal1({ isOpen, ...props }) {
  useEffect(() => {
    console.log("Modal 1 mounted.");
    return () => {
      console.log("Modal 1 unmounted.");
    };
  }, [isOpen]);

  if (isOpen) {
    return <div>Modal1</div>;
  } else return null;
}


// Modal 2
function Modal2() {
  useEffect(() => {
    console.log("Modal 2 mounted.");
    return () => {
      console.log("Modal 2 unmounted.");
    };
  });
  return <div>Modal 2</div>;
}


function App() {
  const [isOpenModal1, setIsOpenModal1] = useState(false);
  const [isOpenModal2, setIsOpenModal2] = useState(false);

  return (
    <div>

      <button onClick={() => setIsOpenModal1(!isOpenModal1)}>
        Toggle Modal 1
      </button>

      <button onClick={() => setIsOpenModal2(!isOpenModal2)}>
        Toggle Modal 2
      </button>

      <Modal1 isOpen={isOpenModal1} />

      {isOpenModal2 && <Modal2 />}
    </div>
  );
}

export default App;

我无法使用Modal 1方式捕获生命周期，因为如果isOpen为false，则它与isOpen prop分开安装，因此无论如何都会渲染null组件。

但是第二种方式，我可以正确使用钩子。

---

1。我可以看到很多模态库都有isOpen prop，它们如何实现生命周期？

例如，https://github.com/reactjs/react-modal-它具有isOpen属性。

2。我想使用Modal1方式，如何正确安装/卸载？

Answer 1

取决于先前状态的更新功能组件状态的推荐方法是使用功能状态更新。

setIsOpenModal1(open => !open)

两种状态更新的演示