react Hooks之useEffect

一：作用：

1. 处理副作用操作：通过在?useEffect?的回调函数中执行副作用操作，例如发送网络请求、订阅事件、手动管理组件的生命周期等。
2. 依赖管理：可以根据传入的依赖数组，在特定的依赖变化时触发?useEffect?的执行。这样可以控制副作用操作的触发时机，避免不必要的重复执行。
3. 清理操作：通过在?useEffect?的回调函数中返回一个清理函数，可以在组件卸载前执行一些清理工作，如取消订阅、清除定时器等。
4. 模拟生命周期方法：可以使用?useEffect?来模拟类组件的生命周期方法，如?componentDidMount、componentDidUpdate、componentWillUnmount?等

二、用法：

useEffect 接受两个参数：

回调函数：用于定义副作用操作的逻辑。回调函数会在每次组件渲染后调用。

依赖数组（可选）：用于指定 effect 所依赖的变量。只有当依赖数组中的变量发生变化时，才会重新执行 effect。如果省略依赖数组，则 effect 在每次组件更新后都会重新执行。

三、示例：

useEffect(() => {
  // 副作用操作代码
  // 返回清理函数（可选）
});

只写一个回调函数而没有指定依赖数组，那么每次组件渲染后都会触发这个回调函数。这意味着该回调函数会在组件挂载后以及每次组件更新后都执行。不推荐这么写。不可以这么写。

useEffect(() => {
    
    
  }, []); 

这个依赖数组未空数组，表示加载该页面时，只执行一次，如果你学过vue，那么你可理解为他相当于vue的create阶段。

useEffect(() => {
    
  }, [a,b]); 

这个依赖项为a和b。当a和b的值发生改变时，就会触发回调函数。可以理解为vue中的监听属性。

useEffect(() => {
    // 返回一个清理函数
    return () => {
      console.log('Component unmounted');
    };
  }, []); 

通过返回一个清理函数，我们可以在组件卸载时执行一些清理操作，比如取消网络请求、清除定时器等。