javascript - useEffect 作为 componentWillUnmount

Question

我正在尝试将旧的类组件重构为带有钩子(Hook)的功能组件，但遇到了 componentWillUnmount

以前的代码是这样的:

 componentDidMount() {    
    this.isDropdownMounted = true;
  } 


  componentWillUnmount() {      
    this.isDropdownMounted = false;
  }

我的解决方案是使用带有清理功能的 useEffect ，但尽管它“看起来”可以工作，但代码审查失败了，我似乎找不到更好的解决方案。我读过有关可能使用 useRef 的内容，但尚未偶然发现类似的用例。

  useEffect(() => {
    isDropdownMounted = true;

    return function cleanup() {
      isDropdownMounted = false;
    };
  }, []);

我可以尝试什么想法吗？

Answer 1

useEffect 允许您返回一个清理函数，该函数将在组件卸载时运行。

注意:只要 useEffect 的依赖项数组中的某些内容发生更改，它也会运行。它确保您始终获得“新鲜”效果。

React docs在 useEffect 上进行清理。

这是他们使用的示例:

使用类:

componentDidMount() {
    ChatAPI.subscribeToFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

componentWillUnmount() {
  ChatAPI.unsubscribeFromFriendStatus(
    this.props.friend.id,
    this.handleStatusChange
  );
}

使用钩子(Hook):

useEffect(() => {
  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }
  ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
  // Specify how to clean up after this effect:
  return function cleanup() {
    ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
  };
});

这是一个工作示例:

function App() {

  const [boolean,setBoolean] = React.useState(true);
  
  const toggleBoolean = () => setBoolean((prevState) => !prevState);

  return(
    <div>
     { boolean ?
         <Component1/>
       : <Component2/>
     }
       <button onClick={toggleBoolean}>Toggle</button>
     </div>
  );
}

function Component1() {

  React.useEffect(() => {
    console.log("Component1 has mounted...");
    return () => { console.log("Component1 has unmounted...")};
  },[]);

  return(
    <div>Component1</div>
  );
}

function Component2() {
  return(
    <div>Component2</div>
  );
}

ReactDOM.render(<App/>, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>