useEffect的使用

1. 学习地址：juejin.cn/post/730491…
2. 我们知道useState是用来定义变量的，那么useEffect是用来处理副作用函数的。useEffect接收两个参数：副作用函数和依赖项数组。当依赖项发生变化时，副作用函数会被调用。如果存在清理函数，它会在组件卸载或依赖项变化时执行。

import React , {useEffect} from 'react';

function ExampleComponent() {
	useEffect(() => {
		console.log('Effect is called');
		return () =>{
			console.log('Effect cleanup')
		}
	}, [])
	return <div>Example Component</div>
}

这里的[]就是放依赖项的，现在是空

1. 清理副作用

useEffect接收的第一个函数参数里面，可以返回一个函数，这个返回的函数呢可以用来清理副作用，场景使用方法在：取消订阅、清理定时器等

useEffect(() => {
  const subscription = subscribe();
  return () => {
    // 清理副作用，比如取消订阅
    subscription.unsubscribe();
  };
}, [dependency]);

1. 异步操作

异步操作同样是在第一个函数里面

useEffect(() => {
	const fetchData = async () => {
		try {
			const response = await fetch('<https://api.example.com/data>')
			const data = await response.json()
			setData(data);
		} catch (error) {
			console.error('Error')
		}
	}
	fetchData();
	return () =>{
		//
	}
}, [])

1. 多个副作用

可以在一个函数里面使用多个副作用

useEffect(() => {
  // 副作用1
}, [dependency1]);

useEffect(() => {
  // 副作用2
}, [dependency2]);

7.条件性副作用

使用if-else来判断副作用中的语句执不执行

useEffect(() => {
  if (shouldRunEffect) {
    // 执行副作用函数
  }
}, [dependency]);

二、useEffect的使用场景

副作用函数的作用在于执行那些不能直接放在组件渲染过程中的操作。

例如：

使用useEffect从API中获取数据，并更新组件状态。

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch('<https://api.example.com/data>');
    const data = await response.json();
    setData(data);
  };

  fetchData();
}, []);

使用useEffect来订阅和取消订阅外部事件：

useEffect(() => {
  const handleScroll = () => {
    // 处理滚动事件
  };

  window.addEventListener('scroll', handleScroll);

  return () => {
    // 在组件卸载时取消订阅
    window.removeEventListener('scroll', handleScroll);
  };
}, []);

使用useEffect来手动操作DOM：

useEffect(() => {
  const element = document.getElementById('myElement');
  // 执行DOM操作
  return () => {
    // 在组件卸载时清理DOM
    element.remove();
  };
}, []);

定时器和周期性任务：

useEffect(() => {
  const intervalId = setInterval(() => {
    // 执行周期性任务
  }, 1000);

  return () => {
    // 在组件卸载时清理定时器
    clearInterval(intervalId);
  };
}, []);

第三方库集成和初始化：

useEffect(() => {
	initializeLibrary();
	return () => {
		cleanupLibrary();
	}
})