hook钩子卸载时和卸载后

最新推荐文章于 2023-12-25 16:16:05 发布

原创

最新推荐文章于 2023-12-25 16:16:05 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

该博客探讨了在React应用中使用Hook进行组件卸载时和卸载后的操作处理，包括清理副作用和资源释放。通过一个Demo案例，详细阐述了如何在生命周期钩子中正确实施这些操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

卸载时的操作

//即将卸载时的操作
<Prompt
    message={(location) => {
       if (resetModal) {
         resetModal.destroy();
       }
     }}
   />

卸载完成后的操作

//卸载完成后的操作
  useEffect(() => {
    return componentDidUnmount;
  }, []);
  const componentDidUnmount = () => {

  };

Demo案例

import { history, Prompt } from 'umi';
import React, { useState, useEffect, useRef } from 'react';
import { withRouter } from 'react-router';
import { Table, Popconfirm,Modal } from 'antd';
const Demo= (props) => {
  const [resetModal, setResetModal] = useState();
  useEffect(() => {
    return componentDidUnmount;
  }, []);
  const componentDidUnmount = () => {

  };
 //重置密码弹窗
  const resetPswModal = (title, psw, name) => {
    let secondsToGo = 3;
    let modalData = {
      width: '320px',
      className: 'pswModal',
      okText: secondsToGo > 0 ? secondsToGo : '知道了',
      okButtonProps: {
        disab