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(() => {

    isDropdownMounted.current = true;

    return function cleanup() {

      isDropdownMounted.current = false;

    };

  }, []);