useEffect 作为 componentWillUnmount

Question

我正在尝试将旧的类组件重构为带钩子的功能组件，但陷入了困境componentWillUnmount

之前的代码是这样的：

 componentDidMount() {    

    this.isDropdownMounted = true;

  } 

  componentWillUnmount() {      

    this.isDropdownMounted = false;

  }

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

  useEffect(() => {

    isDropdownMounted = true;

    return function cleanup() {

      isDropdownMounted = false;

    };

  }, []);

我可以尝试什么想法吗？

Answer 1

useEffect允许您返回一个清理函数，该函数将在组件卸载时运行。注意：只要依赖数组中的某些内容发生更改，它也会运行useEffect。它向您保证您将始终获得“新鲜”的效果。通过清理来响应文档useEffect。这是他们使用的示例：使用类：componentDidMount() {    ChatAPI.subscribeToFriendStatus(      this.props.friend.id,      this.handleStatusChange    );  }componentWillUnmount() {  ChatAPI.unsubscribeFromFriendStatus(    this.props.friend.id,    this.handleStatusChange  );}使用钩子：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"/>

Answer 2

React 不记得 isDropdownMounted 变量。它将在每次渲染时重新创建。最好使用 useRef 钩子来设置 useEffect 中的值并在下次渲染时记住它。const isDropdownMounted = useRef(null);useEffect(() => {&nbsp; &nbsp; isDropdownMounted.current = true;&nbsp; &nbsp; return function cleanup() {&nbsp; &nbsp; &nbsp; isDropdownMounted.current = false;&nbsp; &nbsp; };&nbsp; }, []);