如何在React Hooks组件卸载时执行特定操作（业务清理）

开发场景：

当我们使用react的hook组件的时候想要在组件销毁的时候做一些事件，

解决方案：

我们可以使用react的Effect hook，

Effect hook的第一个参数可以return一个函数，这样就可以在组件销毁的时候触发它：

• 比如：

import React, { useEffect } from 'react';
function Test() {
  useEffect(() => {
    queryHandler();
    return componentWillUnmount;
  }, []);

  function componentWillUnmount() {
    // 组件销毁时你要执行的代码
    alert('组件销毁？')
  }
  
  return (
	<div>
		<button onClick={路由跳转（自己定义方法）}>路由跳转</button>
	</div>
  )
}
export default YetContent;

这样我们就实现了在销毁的时候发现弹出了此窗口，证明已经成功的监视了组件销毁的这个钩子。

但是会有一个bug，就是组件渲染的时候就会弹出此框。

我们的解决方法就是根据此hook组件的参数来进行判断，我们在此组件的父组件上将this.props.history传到这个组件上，大概是这样的：

import React from 'react';
import Test from ''; //你的hook子组件目录位置
export default class ParentPage extends Component {
	render() {
		return (
			<div>
				我是父组件
				<Test history={this.props.history}/>
			</div>
		)
	}
}

然后就可以在子组件接收了 将上方的Hook组件改为此代码：

import React, { useEffect } from 'react';
function Test({ history }) {
  useEffect(() => {
    queryHandler();
    return componentWillUnmount;
  }, []);

  function componentWillUnmount() {
  	// 用遍量存放要到的那个组件的pathname
    const nextRoutePathName = history.location.pathname;
    // 判断路由是哪个地址，如果不是当前的路由地址说明是销毁了，那就执行事件，如果是那就不执行
    if (!String.prototype.startsWith.call(nextRoutePathName, '/admin/test')) {	
		// 你的操作
		alert('组件销毁！')
	}
  }
  
  return (
	<div>
		<button onClick={路由跳转（自己定义方法）}>路由跳转</button>
	</div>
  )
}
export default YetContent;