React useEffect cleanup

date
Mar 11, 2021
slug
react-useeffect
status
Published
tags
React
summary
React useEffect使用进阶-清除
type
Post
以最 useEffect 经常使用场景为例:
useEffect(() => {
  document.title = `The page is loaded`;
});
 
设定依赖触发的值:
useEffect(() => {
  document.title = `The page ${title} is loaded`;
}, [title]);
上述代码会在 title 修改后触发。
 
传入空数组,只在组件挂载时运行一次:
useEffect(() => {
  // Only run once
  document.title = `The page ${title} is loaded`;
}, []);
 
清理 useEffect
自动调用清理函数只需要添加一个 return 方法:
useEffect(() => {
  // Your effect

  return () => {
    // Cleanup
  };
}, []);
 
清理函数可以防止内存泄漏,和清理不需要的元素,比如:
  1. 清理订阅(subscriptions)
  1. 清理弹窗 Modals
  1. 删除监听事件
  1. 清理超时运算

© Wang Lin 2021 - 2022