本
removeEventListener应该得到的引用到在分配相同的回调
addEventListener。重新创建该功能将无效。解决方案是在其他地方（
onUnload在本示例中）创建回调，并将其作为对
addEventListener和的引用传递
removeEventListener：
import React, { PropTypes, Component } from 'react';class MyComponent extends Component { onUnload = e => { // the method that will be used for both add and remove event e.preventDefault(); e.returnValue = ''; } componentDidMount() { window.addEventListener("beforeunload", this.onUnload); } componentWillUnmount() { window.removeEventListener("beforeunload", this.onUnload); } render() { return ( <div> Some content </div> ); }}export default MyComponent反应钩子
您可以
beforeunload使用
useRef和
useEffect钩子将事件处理抽象为自定义钩子。
自定义钩子
useUnload接收一个函数（
fn）并将其分配给当前引用。它会调用
useEffect，并设置事件处理程序，并在删除组件时返回清除函数以删除事件处理程序。
import { useRef, useEffect } from 'react';const useUnload = fn => { const cb = useRef(fn); useEffect(() => { const onUnload = cb.current; window.addEventListener("beforeunload", onUnload); return () => window.removeEventListener("beforeunload", onUnload); }, [cb]);};export default useUnload;用法：
const MyComponent = () => { useUnload(e => { e.preventDefault(); e.returnValue = ''; }); return ( <div> Some content </div> );};
