首页手记 useEffect入门：React钩子的简单使用教程

useEffect入门：React钩子的简单使用教程

标签：

JavaScript React.JS

概述

本文详细介绍了useEffect入门的相关知识，包括useEffect的基本用法、作用、依赖数组的使用以及常见场景。通过对比生命周期方法和避免常见陷阱，帮助读者更好地理解和应用useEffect。

什么是useEffect

useEffect 是 React 16.8 版本引入的 Hooks API 中的重要组成部分。它允许在不编写类组件的情况下实现类似于生命周期方法的功能，使函数组件具备了管理副作用的能力，如处理事件监听、数据获取、定时器等。

useEffect的作用

useEffect 在函数组件中提供了一种灵活的方式来订阅、执行异步操作和处理副作用。它的主要作用包括：

订阅和取消订阅：例如，在组件卸载时取消订阅某个事件。
数据获取：从 API 获取数据，并在组件重新渲染时保持数据的一致性。
设置焦点和滚动条：在组件渲染后将焦点设置到某个元素或滚动到某个位置。
定时器操作：创建和清除定时器。

useEffect与生命周期方法的对比

useEffect 与 React 类组件中的生命周期方法（如 componentDidMount, componentDidUpdate, componentWillUnmount）有类似的功能，但使用方式更加统一和简单。以下是它们之间的对比：

componentDidMount：在组件挂载后运行一次，相当于 useEffect 里不提供依赖数组或传递空数组 [] 时。
componentDidUpdate：在组件更新后运行，相当于 useEffect 依赖数组发生变化时。
componentWillUnmount：在组件卸载前运行，相当于 useEffect 中清理函数（返回的函数）的作用。

useEffect的基本用法

useEffect 是一个高阶函数，接收一个函数作为参数，该函数内部可以包含副作用逻辑。

useEffect的基本语法

import React, { useEffect } from 'react';

function ExampleComponent() {
  useEffect(() => {
    // 副作用逻辑
  });

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

在上述示例中，useEffect 内部的函数会在组件挂载后执行，并且在组件更新或卸载时执行相应的清理操作。

useEffect执行的时机

挂载时：当组件首次渲染时，useEffect 内部的函数会执行。
更新时：当组件接收到新状态或属性时，useEffect 内部的函数会再次执行。
卸载时：当组件从 DOM 中卸载时，useEffect 返回的清理函数会被执行。

useEffect的依赖数组

useEffect 的依赖数组用于控制 React 何时重新执行副作用函数。依赖数组中的每个依赖项都是函数组件内部使用的变量。

依赖数组的作用

依赖数组可以控制 useEffect 的执行时机。如果依赖数组中的任何一个值发生变化，useEffect 将重新执行。如果依赖数组为空数组 []，则 useEffect 只在组件挂载或卸载时执行。

依赖数组的使用场景

固定依赖数组：当 useEffect 有固定依赖数组时，它会在组件挂载、更新和卸载时执行相应的逻辑。
变化依赖数组：当 useEffect 依赖于某个变量时，它会在该变量变化时重新执行。

useEffect的常见场景

useEffect 可以用于处理多种常见的场景，包括数据获取、订阅和取消订阅、设置焦点和滚动条等。

数据获取

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

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

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error('Error fetching data:', error));
  }, []); // 依赖数组为空，仅在组件挂载时执行

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

订阅和取消订阅

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

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

  useEffect(() => {
    const subscription = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    // 清理函数，清除订阅
    return () => clearInterval(subscription);
  }, []); // 依赖数组为空，仅在组件挂载时执行订阅和卸载时执行清理

  return <div>Count: {count}</div>;
}

设置焦点和滚动条

import React, { useEffect } from 'react';

function ScrollExample() {
  useEffect(() => {
    const elem = document.getElementById('scrollDiv');
    elem.scrollIntoView({ behavior: 'smooth' });
  }, []); // 依赖数组为空，仅在组件挂载时执行

  return (
    <div>
      <p>Scroll to me!</p>
      <div id="scrollDiv" style={{ marginTop: '2000px' }}>
        <p>It's down here!</p>
      </div>
    </div>
  );
}

依赖数组的优化

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

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

  useEffect(() => {
    console.log(useMemo(() => count, [count])); // 使用 useMemo 优化依赖数组的引用
  }, [count]); // 依赖数组为空，仅在组件挂载和卸载时执行

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

避免常见的useEffect陷阱

使用 useEffect 时，需要注意一些常见的陷阱，以避免不必要的重渲染和性能问题。

依赖数组的错误使用

依赖数组的选择对于 useEffect 的性能至关重要。例如，如果将 useEffect 依赖于一个对象或数组，而该对象或数组的引用在每次更新时都会发生变化（即使其内容未变），会导致不必要的执行。

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

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

  useEffect(() => {
    // 此处依赖于 count，但每次更新时 count 引用会变化
    console.log(count);
  }, [count]); // 错误的依赖数组

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

正确的做法是使用 useMemo 或 useCallback 来优化依赖对象或数组的引用。

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

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

  useEffect(() => {
    // 使用 useMemo 优化依赖数组的引用
    console.log(useMemo(() => count, [count]));
  }, [count]); // 正确的依赖数组

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

useEffect中不要修改状态

在 useEffect 中修改状态会导致不必要的多次重渲染。如果需要在 useEffect 中更新状态，可以使用 useEffect 返回的清理函数来处理复杂的更新逻辑。

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

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

  useEffect(() => {
    // 避免在此直接更新状态
    setCount(count + 1); // 这会导致不必要的多次重渲染
  }, [count]); // 错误的做法

  useEffect(() => {
    // 使用 cleanup 函数处理复杂的更新逻辑
    const timer = setTimeout(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    return () => clearTimeout(timer); // 清理函数，清除定时器
  }, []); // 正确的做法

  return (
    <div>
      <p>Count: {count}</p>
    </div>
  );
}

总结与练习

小结useEffect的关键点

useEffect 可以在不编写类组件的情况下处理副作用，如订阅和取消订阅、数据获取、设置焦点和滚动条。
依赖数组可以控制 useEffect 的执行时机，空数组表示仅在组件挂载和卸载时执行。
注意依赖数组的优化，避免不必要的重渲染。
在 useEffect 中谨慎使用状态更新，特别是在订阅和定时器等复杂场景中。

课后练习题

数据获取：实现一个函数组件，从 API 获取数据并在组件挂载时显示数据。

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

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

 useEffect(() => {
   fetch('https://api.example.com/data')
     .then(response => response.json())
     .then(data => setData(data))
     .catch(error => console.error('Error fetching data:', error));
 }, []); // 依赖数组为空，仅在组件挂载时执行

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

订阅和取消订阅：创建一个订阅函数，模拟每秒更新一次的计数器。在组件卸载时取消订阅。

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

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

 useEffect(() => {
   const subscription = setInterval(() => {
     setCount(prevCount => prevCount + 1);
   }, 1000);

   // 清理函数，清除订阅
   return () => clearInterval(subscription);
 }, []); // 依赖数组为空，仅在组件挂载时执行订阅和卸载时执行清理

 return <div>Count: {count}</div>;
}

设置焦点：实现一个组件，在挂载后自动将焦点设置到某个输入框。

import React, { useEffect } from 'react';

function ScrollExample() {
 useEffect(() => {
   const elem = document.getElementById('scrollDiv');
   elem.scrollIntoView({ behavior: 'smooth' });
 }, []); // 依赖数组为空，仅在组件挂载时执行

 return (
   <div>
     <p>Scroll to me!</p>
     <div id="scrollDiv" style={{ marginTop: '2000px' }}>
       <p>It's down here!</p>
     </div>
   </div>
 );
}

依赖数组的优化：优化一个依赖数组，确保在状态更新时不会引起不必要的重渲染。

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

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

 useEffect(() => {
   console.log(useMemo(() => count, [count])); // 使用 useMemo 优化依赖数组的引用
 }, [count]); // 依赖数组为空，仅在组件挂载和卸载时执行

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

清理函数的使用：实现一个组件，在挂载时设置定时器，并在卸载时清除定时器。

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

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

 useEffect(() => {
   // 避免在此直接更新状态
   setCount(count + 1); // 这会导致不必要的多次重渲染
 }, [count]); // 错误的做法

 useEffect(() => {
   // 使用 cleanup 函数处理复杂的更新逻辑
   const timer = setTimeout(() => {
     setCount(prevCount => prevCount + 1);
   }, 1000);

   return () => clearTimeout(timer); // 清理函数，清除定时器
 }, []); // 正确的做法

 return (
   <div>
     <p>Count: {count}</p>
   </div>
 );
}

通过这些练习，可以帮助你更好地理解和运用 useEffect，并提高处理复杂逻辑的能力。

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

LEATH

手记
篇

粉丝

93

获赞与收藏

467

关注作者，订阅最新文章

阅读免费教程

JavaScript 入门教程

80个小节 313524 2207

后端通用面试教程

41个小节 30936 346

网络编程入门教程

20个小节 12729 240

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空