关于组件销毁的业务处理

来源：4-5 【副作用钩子】使用useEffect异步获取数据

写前端的小程

2021-06-06

请问老师在使用reactHooks的时候怎么处理组件销毁时的业务逻辑，比如清空定时器

写回答

1回答

阿莱克斯刘

2021-06-08

给你一个例子：

类组件

componentDidMount() {  
    window.addEventListener('mousemove', () => {})
}

componentWillUnmount() {  
    window.removeEventListener('mousemove', () => {})
}

等于函数式组件 hooks

useEffect(() => {  
  window.addEventListener('mousemove', () => {});  
  
  // 返回函数将会在组件销毁时被调用 
  return () => {    
    window.removeEventListener('mousemove', () => {})
  }
}, [])

所以类组件的componentWillUnmount方法就相当于useEffect hook的返回函数。

参考文档： https://zh-hans.reactjs.org/docs/hooks-reference.html#useeffect

//img.mukewang.com/szimg/60be5bea092d8cec16160904.jpg