hook钩子卸载时和卸载后

马娟

于 2021-03-02 13:42:57 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： hooks

本文链接：https://blog.youkuaiyun.com/weixin_41077029/article/details/114283089

该博客探讨了在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