首页手记 useEffect学习：React Hooks入门教程

useEffect学习：React Hooks入门教程

标签：

JavaScript React.JS Vue.js

概述

本文深入介绍了React Hooks中的useEffect，包括其基本语法、执行时机以及在实际项目中的应用。通过详细的示例，讲解了useEffect在管理状态、订阅事件和执行副作用操作中的重要作用。文章还探讨了依赖数组的使用方法以及如何避免常见陷阱，帮助开发者更高效地使用useEffect。

React Hooks简介

什么是React Hooks

React Hooks 是 React 16.8 版本引入的一个新特性，它允许我们在不编写类组件的情况下使用之前只能在类组件中使用的特性，如状态（state）、生命周期方法等。Hooks 的引入使得函数组件（Function Component）也能拥有类组件的功能，这让组件的逻辑变得更加清晰和灵活。

React Hooks的作用和优势

React Hooks 的主要优势在于它简化了组件开发，使得代码更加简洁和易于理解。通过 Hooks，我们可以更方便地管理状态、订阅事件、执行副作用等操作，而不需要将函数组件转换为类组件。此外，Hooks 的出现使得逻辑重用变得简单，我们可以编写可复用的 Hooks 来封装复杂的逻辑，并在其他组件中使用这些 Hooks。

useEffect Hook基础使用

useEffect Hook的基本介绍

useEffect 是 React Hooks 中最重要的 Hook 之一，它允许我们在组件的挂载、更新和卸载等阶段执行副作用操作。副作用可以指任何可能会导致外部变化的操作，比如订阅数据、设置监听器、发送网络请求等。

基本语法

useEffect(() => {
  // 在挂载时和每次更新后执行的代码
  console.log('Component mounted or updated');

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

在上面的例子中，useEffect 函数接收两个参数：一个函数（表示副作用操作）和一个依赖数组（可选）。依赖数组控制着 useEffect 的运行时机。如果依赖数组为空，useEffect 将在每次渲染时运行（包括首次渲染）。如果依赖数组包含某些变量，useEffect 将在这些变量变化时运行。

useEffect Hook的基本语法

useEffect Hook 的基本语法如下：

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 在挂载时执行的副作用
    console.log('Component mounted');

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

  return <div>Hello, useEffect!</div>;
}

在上面的例子中，useEffect 函数在组件挂载时执行 console.log('Component mounted')。在组件卸载时，清理函数 console.log('Component will unmount') 会被调用。

创建和理解简单的useEffect Hook

创建一个简单的 useEffect Hook 通常涉及以下步骤：

导入 useEffect。
定义一个函数组件。
在组件内部使用 useEffect 来执行副作用。
返回一个清理函数来清理副作用。

下面是一个完整的例子，展示了如何使用 useEffect 来订阅数据并在组件卸载时清理订阅：

import React, { useEffect } from 'react';

function DataSubscription() {
  useEffect(() => {
    console.log('Component mounted');

    const subscription = setInterval(() => {
      console.log('Data updated');
    }, 1000);

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

  return <div>Data Subscription Example</div>;
}

export default DataSubscription;

在这个例子中，setInterval 用于模拟数据更新，并在组件卸载时通过返回的清理函数 clearInterval 来清理这个定时器。

useEffect Hook的执行时机

useEffect 的执行时机取决于依赖数组的内容：

依赖数组为空：useEffect 在每次渲染时都会执行。
依赖数组包含依赖项：useEffect 只有在依赖项发生变化时才会执行。

例如：

import React, { useEffect, useState } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    console.log('Fetching data...');

    fetch('/api/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // 依赖数组为空，只在初始渲染时执行

  return <div>Data: {data ? JSON.stringify(data) : 'Loading...'}</div>;
}

export default DataFetcher;

在这个例子中，useEffect 只会在组件初始挂载时执行一次，从 /api/data 获取数据并更新状态。依赖数组为空表示这个 useEffect 不会因为其他状态变化而重新执行。这里我们将展示如何在不同的依赖数组配置下管理副作用：

import React, { useEffect, useState } from 'react';

function ExampleWithDependency() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Effect runs when count changes');
  }, [count]);

  useEffect(() => {
    console.log('Effect runs only on initial render');
  }, []);

  useEffect(() => {
    console.log('Effect runs when data changes');
  }, [data]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default ExampleWithDependency;

useEffect Hook的依赖数组

依赖数组的作用

依赖数组的作用是控制 useEffect 的执行时机。当依赖数组为空时，useEffect 会在每次渲染时运行；当依赖数组包含某些变量时，useEffect 只会在这些变量改变时运行。

常见依赖数组的使用场景

依赖数组在实际开发中非常有用，特别是在处理状态更新和副作用时。

示例1：更新状态时触发`useEffect`

import React, { useEffect, useState } from 'react';

function IncrementCounter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`Count updated to ${count}`);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default IncrementCounter;

在这个例子中，useEffect 只有在 count 发生变化时才会执行，这意味着每次点击按钮都会触发 useEffect，并打印当前的 count 值。

示例2：监听浏览器窗口大小变化

import React, { useEffect, useState } from 'react';

function WindowSize() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => {
      setWidth(window.innerWidth);
    };

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return (
    <div>
      <p>Window width: {width}px</p>
    </div>
  );
}

export default WindowSize;

在这个例子中，useEffect 添加了一个事件监听器来监听窗口大小的变化，并在组件卸载时移除这个监听器，以避免内存泄漏。

使用依赖数组处理常见的副作用问题

处理常见的副作用问题时，依赖数组帮助我们避免不希望的副作用执行。例如，避免在每次渲染时都执行副作用，只在依赖变化时执行。

示例：优化`useEffect`的执行

import React, { useEffect, useState } from 'react';

function OptimizedIncrement() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Effect only runs when count changes');
    // 假设这里有一个耗时的网络请求
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default OptimizedIncrement;

在这个例子中，useEffect 只会在 count 发生变化时执行，而不是每次渲染时都执行，从而避免了不必要的副作用执行。

示例：监听键盘事件

import React, { useEffect, useState } from 'react';

function KeyPressListener() {
  const [lastKeyPressed, setLastKeyPressed] = useState('');

  useEffect(() => {
    const handleKeyPress = (event) => {
      setLastKeyPressed(event.key);
    };

    window.addEventListener('keydown', handleKeyPress);

    return () => {
      window.removeEventListener('keydown', handleKeyPress);
    };
  }, []);

  return (
    <div>
      <p>Last key pressed: {lastKeyPressed}</p>
    </div>
  );
}

export default KeyPressListener;

在这个例子中，useEffect 监听窗口上的键盘事件，并在组件卸载时移除这个事件监听器。

useEffect Hook的高级用法

如何在useEffect Hook中清理副作用

在 useEffect 中处理副作用时，经常会遇到需要清理副作用的情况。例如，当我们添加了一个监听器、定时器或者订阅了一个事件时，我们需要在组件卸载时清理这些副作用。

import React, { useEffect } from 'react';

function CleanupEffect() {
  useEffect(() => {
    console.log('Component mounted');

    const subscription = setInterval(() => {
      console.log('Data updated');
    }, 1000);

    return () => {
      console.log('Component will unmount');
      clearInterval(subscription);
    };
  }, []);

  return <div>Cleanup Example</div>;
}

export default CleanupEffect;

在这个例子中，我们使用 setInterval 创建了一个定时器，在组件卸载时通过返回的清理函数 clearInterval 来清理这个定时器。

示例：在组件卸载时移除多个监听器

import React, { useEffect } from 'react';

function MultipleListeners() {
  useEffect(() => {
    console.log('Component mounted');

    const resizeListener = () => {
      console.log('Window resized');
    };

    const scrollListener = () => {
      console.log('Window scrolled');
    };

    window.addEventListener('resize', resizeListener);
    window.addEventListener('scroll', scrollListener);

    return () => {
      console.log('Component will unmount');
      window.removeEventListener('resize', resizeListener);
      window.removeEventListener('scroll', scrollListener);
    };
  }, []);

  return <div>Multiple Listeners Example</div>;
}

export default MultipleListeners;

在这个例子中，我们添加了多个监听器并在组件卸载时移除这些监听器。

useEffect Hook在组件卸载时执行清理函数

通过返回一个清理函数，我们可以在组件卸载时执行清理操作，确保在组件不再使用时资源能够被正确释放。

import React, { useEffect } from 'react';

function DataSubscription() {
  useEffect(() => {
    console.log('Component mounted');

    const subscription = setInterval(() => {
      console.log('Data updated');
    }, 1000);

    return () => {
      console.log('Component will unmount');
      clearInterval(subscription);
    };
  }, []);

  return <div>Data Subscription Example</div>;
}

export default DataSubscription;

在这个例子中，当组件卸载时，清理函数会被调用，清除定时器。

避免不必要的re-render和优化性能的方法

避免不必要的 re-render 和优化性能可以通过以下几种方法实现：

减少依赖数组中的依赖项：如果依赖数组中的依赖项过多，会导致 useEffect 在每次渲染时都执行。通过减少不必要的依赖项，可以避免不必要的副作用执行。
使用 useMemo 和 useCallback：useMemo 和 useCallback 可以在多次渲染时避免重新计算和重新创建函数，从而避免不必要的副作用执行。
延迟更新：使用 useEffect 来延迟副作用的执行，直到状态更新完全后执行。

示例：使用`useMemo`优化性能

import React, { useEffect, useMemo, useState } from 'react';

function OptimizedComponent() {
  const [count, setCount] = useState(0);

  const expensiveComputation = useMemo(() => {
    console.log('Expensive computation');
    // 假设这里有一个耗时的计算
    return count * 2;
  }, [count]);

  useEffect(() => {
    console.log('Effect only runs when count changes');
  }, [expensiveComputation]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>Result: {expensiveComputation}</p>
    </div>
  );
}

export default OptimizedComponent;

在这个例子中，useMemo 用于缓存耗时的计算，确保在 count 发生变化时才重新计算，从而避免不必要的副作用执行。

示例：延迟更新副作用

import React, { useEffect, useState } from 'react';

function DelayedEffect() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Effect runs after 1 second delay');
    setTimeout(() => {
      console.log('Delayed effect executed');
    }, 1000);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default DelayedEffect;

在这个例子中，useEffect 会在每次 count 发生变化时延迟一秒执行副作用。

实际项目中的useEffect Hook应用

模拟一个简单的计数器组件

下面是一个简单的计数器组件，使用 useEffect 来记录每次计数操作：

import React, { useEffect, useState } from 'react';

function SimpleCounter() {
  const [count, setCount] = useState(0);
  const [history, setHistory] = useState([]);

  useEffect(() => {
    setHistory([...history, count]);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>History: {JSON.stringify(history)}</p>
    </div>
  );
}

export default SimpleCounter;

在这个例子中，useEffect 在每次 count 发生变化时执行，记录当前的 count 值到 history 中。

通过useEffect Hook实现数据的异步请求

使用 useEffect 可以轻松实现数据的异步请求，并在请求完成后更新状态：

import React, { useEffect, useState } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    console.log('Fetching data...');

    fetch('/api/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // 空依赖数组，只在初始渲染时执行一次

  return (
    <div>
      {data ? (
        <pre>{JSON.stringify(data, null, 2)}</pre>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

export default DataFetcher;

在这个例子中，useEffect 会在组件初始渲染时执行一次，从 /api/data 获取数据并更新状态。data 变量用于显示加载中的状态，当数据加载完成后，显示 JSON 数据。

示例：处理多个异步请求

import React, { useEffect, useState } from 'react';

function MultiDataFetcher() {
  const [data1, setData1] = useState(null);
  const [data2, setData2] = useState(null);

  useEffect(() => {
    console.log('Fetching data1...');
    fetch('/api/data1')
      .then(response => response.json())
      .then(data => setData1(data));

    console.log('Fetching data2...');
    fetch('/api/data2')
      .then(response => response.json())
      .then(data => setData2(data));
  }, []);

  return (
    <div>
      {data1 && data2 ? (
        <div>
          <pre>Data 1: {JSON.stringify(data1, null, 2)}</pre>
          <pre>Data 2: {JSON.stringify(data2, null, 2)}</pre>
        </div>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

export default MultiDataFetcher;

在这个例子中，useEffect 会在组件挂载时同时发起两个异步请求，并在请求完成后更新状态。

使用useEffect Hook监听浏览器窗口的大小变化

使用 useEffect 可以监听浏览器窗口的大小变化，并根据变化更新状态：

import React, { useEffect, useState } from 'react';

function WindowSize() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => {
      setWidth(window.innerWidth);
    };

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return (
    <div>
      <p>Window width: {width}px</p>
    </div>
  );
}

export default WindowSize;

在这个例子中，useEffect 在组件挂载时添加了一个窗口大小变化的监听器。当窗口大小发生变化时，通过 setWidth 更新状态，以显示当前窗口宽度。

示例：监听鼠标移动

import React, { useEffect, useState } from 'react';

function MousePosition() {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const handleMouseMove = (event) => {
      setPosition({ x: event.clientX, y: event.clientY });
    };

    window.addEventListener('mousemove', handleMouseMove);

    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
    };
  }, []);

  return (
    <div>
      <p>Mouse position: ({position.x}, {position.y})</p>
    </div>
  );
}

export default MousePosition;

在上述示例中，useEffect 监听窗口上的鼠标移动事件，并在组件卸载时移除这个事件监听器。

常见问题与解答

useEffect Hook中常见的陷阱和解决方法

在使用 useEffect 时，一些常见的陷阱包括：

忘记清理副作用：如果在 useEffect 中添加了监听器或定时器，但没有提供清理函数，会导致内存泄漏。
依赖数组中的变量变化：如果依赖数组中的变量发生变化，useEffect 会重新执行，这可能会导致不必要的副作用。
依赖数组为空：如果依赖数组为空，useEffect 会在每次渲染时执行，这可能会导致性能问题。

示例：避免重新执行副作用

import React, { useEffect, useState } from 'react';

function OptimizedComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Effect only runs when count changes');
    // 假设这里有一个耗时的网络请求
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default OptimizedComponent;

在这个例子中，通过指定依赖数组中的变量，我们确保只有在 count 发生变化时才重新执行副作用，避免了不必要的副作用执行。

如何在多个useEffect Hook之间共享逻辑

在多个 useEffect 之间共享逻辑时，可以将共享逻辑提取到一个独立的 Hook 中，然后在需要的地方使用这个 Hook。

示例：共享逻辑的 Hook

import React, { useEffect } from 'react';

function useTitle(title) {
  useEffect(() => {
    document.title = title;
  }, [title]);
}

function MyComponent() {
  useTitle('My Component');

  return <div>My Component</div>;
}

export default MyComponent;

在这个例子中，我们定义了一个 useTitle Hook，用于设置文档的标题。这个 Hook 可以在多个组件中使用，实现了逻辑的复用。

对于初学者的实用建议和注意事项

对于初学者来说，以下是一些实用建议和注意事项：

理解依赖数组：依赖数组控制着 useEffect 的执行时机，确保在需要的地方指定依赖数组。
避免频繁的副作用执行：考虑使用 useMemo 和 useCallback 来缓存计算和函数，避免不必要的副作用执行。
清理副作用：确保在组件卸载时清理副作用，避免内存泄漏。
避免不必要的re-render：通过减少依赖数组中的依赖项，使用 useMemo 和 useCallback 等方法来避免不必要的 re-render。
注意性能优化：在实际项目中，性能优化非常重要。避免在每次渲染时都执行副作用。

通过以上建议和注意事项，你可以更好地理解和使用 useEffect，提高你的 React 组件的性能和可维护性。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

慕神8447489

手记
篇

粉丝

174

获赞与收藏

957

关注作者，订阅最新文章

阅读免费教程

JavaScript 入门教程

80个小节 315748 2221

后端通用面试教程

41个小节 31416 348

网络编程入门教程

20个小节 12873 242

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空