首頁手記 React Hooks之useEffect課程：新手入門教程

React Hooks之useEffect課程：新手入門教程

標簽：

前端工具 React.JS

概述

本文详细介绍了useEffect课程，解释了React Hooks的基本概念及其在函数组件中的应用，重点讲解了useEffect的工作原理和常见用法，帮助开发者更好地理解和使用useEffect课程。

React Hooks简介

React Hooks 是 React 16.8 版本引入的新特性，它允许你在不编写类组件的情况下使用 React 提供的状态管理功能。通过 Hooks，开发者可以在函数组件中直接调用 state 和生命周期相关的 API，从而增强代码的可维护性和可读性。

什么是React Hooks

React Hooks 使得开发者能够在不编写类组件的情况下使用 React 的状态和生命周期功能。在之前版本的 React 中，要使用这些功能，开发者需要编写类组件，并在其中实现 this.state 及生命周期方法如 componentDidMount、componentDidUpdate 和 componentWillUnmount。然而，这些方法需要在类组件中使用，导致新开发者难以理解这些概念，尤其是对于那些习惯于函数式编程的开发者来说，编写类组件可能会显得冗余和复杂。Hooks 解决了这个问题，允许你在函数组件中使用这些功能。

Hooks 提供了两个主要的功能：

状态钩子：如 useState，允许你在函数组件中使用状态。
生命周期钩子：如 useEffect，允许你在函数组件中添加生命周期逻辑。

Hooks的作用和优势

Hooks 的引入在多个方面改进了 React 开发体验：

简化状态管理：通过 useState，开发者可以轻松地在函数组件中管理状态，而不需要编写复杂的类组件。例如：

function Counter({initialCount}) {
 const [count, setCount] = useState(initialCount);
 return (
   <div>
     Count: {count}
     <button onClick={() => setCount(count + 1)}>
       Increment count
     </button>
   </div>
 );
}

增强代码可读性：保持组件逻辑的清晰度，避免在组件中嵌入过多的状态和生命周期逻辑，使得组件易于理解和维护。例如：

function Example() {
 const [count, setCount] = useState(0);
 useEffect(() => {
   document.title = `You clicked ${count} times`;
 });
 return (
   <div>
     <p>You clicked {count} times</p>
     <button onClick={() => setCount(count + 1)}>
       Click me
     </button>
   </div>
 );
}

代码复用：实现和使用自定义Hooks，通过 useEffect 实现更复杂的逻辑逻辑，如网络请求、订阅和取消订阅等，这些逻辑可以封装成独立的函数，用于不同的组件之间复用。例如：

function useFriendStatus(friendID) {
 const [isOnline, setIsOnline] = useState(null);
 useEffect(() => {
   function handleStatusChange(status) {
     setIsOnline(status.isOnline);
   }
   ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
   return () => {
     ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
   };
 });
 return isOnline;
}

useEffect基本用法

useEffect 是 React Hooks 中最重要的 API 之一，它允许你在函数组件中执行副作用操作，比如订阅、DOM 操作、数据获取等。useEffect 的基本语法如下：

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 做副作用操作
  });

  return (
    <div>
      {/* 组件内容 */}
    </div>
  );
}

useEffect在生命周期中的作用

useEffect 实现了之前类组件中常见的生命周期方法的功能，如 componentDidMount、componentDidUpdate 和 componentWillUnmount。以下是如何使用 useEffect 来模拟这些生命周期方法：

模拟 componentDidMount 和 componentDidUpdate：

function MyComponent() {
 useEffect(() => {
   // 相当于 componentDidMount 和 componentDidUpdate:
   console.log('Component did mount or update');
   // 清理操作
   return () => {
     console.log('Component will unmount');
   };
 });

 return (
   <div>
     {/* 组件内容 */}
   </div>
 );
}

模拟 componentDidMount：

function MyComponent() {
 useEffect(() => {
   // 相当于 componentDidMount:
   console.log('Component did mount');
   // 清理操作
   return () => {
     console.log('Component will unmount');
   };
 }, []); // 空数组表示仅在组件挂载时运行

 return (
   <div>
     {/* 组件内容 */}
   </div>
 );
}

模拟 componentDidUpdate：

function MyComponent() {
 const [count, setCount] = useState(0);
 useEffect(() => {
   // 相当于 componentDidUpdate:
   console.log('Component did update');
   // 清理操作
   return () => {
     console.log('Component will unmount');
   };
 }, [count]); // 依赖数组包含 count，表示在 count 更新时运行

 return (
   <div>
     {/* 组件内容 */}
   </div>
 );
}

useEffect的依赖数组

useEffect 的依赖数组是一个重要的概念，它决定了 useEffect 何时会重新运行。依赖数组中的每一个值都会被 React 用于判断组件的状态是否发生变化，从而决定是否重新运行 useEffect。

依赖数组的作用

依赖数组决定了 useEffect 的执行时机。当你在依赖数组中提供一个值（通常是状态或 props），useEffect 会在该值发生变化时重新执行。以下是一些常见的依赖数组用法：

空数组：

useEffect(() => {
 // 仅在组件挂载或卸载时运行
}, []);

单一状态：

const [count, setCount] = useState(0);
useEffect(() => {
 console.log(`Current count: ${count}`);
 // 只在 count 更新时运行
}, [count]);

多个状态：

const [count, setCount] = useState(0);
const [name, setName] = useState('Alice');
useEffect(() => {
 console.log(`Current count: ${count}, name: ${name}`);
 // 只在 count 或 name 更新时运行
}, [count, name]);

函数：

const [count, setCount] = useState(0);
const increment = () => setCount(count + 1);
useEffect(() => {
 console.log(`Increment: ${increment}`);
 // 依赖数组中包含函数，该函数每次渲染时都会重新创建，导致每次都会触发
}, [increment]);

常见的依赖数组用法

依赖数组在 useEffect 中非常重要，以下是一些常见的用法：

依赖数组为空：

仅在组件挂载和卸载时运行，适用于初始化和清理操作。

useEffect(() => {
// 初始化操作
console.log('Component did mount');
// 清理操作
return () => {
console.log('Component will unmount');
};
}, []);

依赖数组包含状态变量：

只有当状态变量发生变化时，useEffect 会重新执行。

const [count, setCount] = useState(0);
useEffect(() => {
console.log(`Count: ${count}`);
// 清理操作
return () => {
console.log('Component will unmount');
};
}, [count]);

依赖数组包含 props：

当 props 发生变化时，useEffect 会重新执行。

function MyComponent({ name }) {
useEffect(() => {
console.log(`Name: ${name}`);
// 清理操作
return () => {
 console.log('Component will unmount');
};
}, [name]);
return (
<div>
 {/* 组件内容 */}
</div>
);
}

依赖数组包含函数：

由于函数每次都会重新创建，导致 useEffect 每次都会执行。

const [count, setCount] = useState(0);
useEffect(() => {
console.log(`Count: ${count}`);
// 清理操作
return () => {
console.log('Component will unmount');
};
}, [() => count]);

useEffect的高级用法

useEffect 除了基本的用法之外，还提供了更高级的用法，如清理函数和多个 useEffect 的使用。

清理函数的使用

useEffect 可以返回一个函数，该函数会在组件卸载时执行。这是清理副作用操作的好方法。以下是一个示例：

function MyComponent() {
  useEffect(() => {
    // 初始化操作
    console.log('Component did mount');
    // 清理函数
    return () => {
      console.log('Component will unmount');
      // 清理操作
    };
  });

  return (
    <div>
      {/* 组件内容 */}
    </div>
  );
}

多个useEffect的应用场景

有时，你可能需要处理多个副作用操作，每个操作都有不同的依赖。这时可以使用多个 useEffect 来处理不同场景。例如：

初始化操作：

useEffect(() => {
 console.log('Component did mount');
 // 清理函数
 return () => {
   console.log('Component will unmount');
 };
}, []);

状态变化操作：

const [count, setCount] = useState(0);
useEffect(() => {
 console.log(`Count: ${count}`);
 // 清理函数
 return () => {
   console.log('Component will unmount');
 };
}, [count]);

props 变化操作：

function MyComponent({ name }) {
 useEffect(() => {
   console.log(`Name: ${name}`);
   // 清理函数
   return () => {
     console.log('Component will unmount');
   };
 }, [name]);
 return (
   <div>
     {/* 组件内容 */}
   </div>
 );
}

useEffect的常见问题与解决方案

在使用 useEffect 时，开发者经常会遇到一些常见的问题，以下是一些典型的场景以及解决方法：

常见问题总结

频繁执行副作用：
- 当依赖项变化时，useEffect 可能会频繁执行副作用。这通常是由于依赖数组中的值发生变化或依赖数组未正确设置导致的。
无法清理副作用：
- 如果没有正确设置清理函数，可能导致副作用无法被清理，这可能会导致内存泄漏。
依赖项变化时，副作用不执行：
- 这通常是由于依赖数组未正确设置导致的。例如，依赖数组中缺少某些关键的依赖项。

解决方案和最佳实践

使用正确的依赖数组：
- 确保依赖数组中包含了所有会导致副作用变化的值。如果依赖数组为空，副作用只会在组件挂载和卸载时执行。

使用 useRef 或 useCallback 优化依赖数组：

使用 useRef 或 useCallback 来优化依赖数组中的函数或对象。例如：

const [count, setCount] = useState(0);
const increment = useCallback(() => setCount(count + 1), [count]);
useEffect(() => {
console.log(`Increment: ${increment}`);
// 清理函数
return () => {
 console.log('Component will unmount');
};
}, [increment]);

正确设置清理函数：

确保每个 useEffect 都有一个清理函数，用于清理副作用操作。例如：

useEffect(() => {
console.log('Component did mount');
// 清理函数
return () => {
 console.log('Component will unmount');
 // 清理操作
};
}, []);

小结与练习

本章知识点回顾

useEffect 是 React Hooks 中最重要的 API 之一，允许你在函数组件中执行副作用操作。
通过 useEffect，你可以模拟类组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 等生命周期方法。
useEffect 的依赖数组决定了何时重新执行副作用函数。正确设置依赖数组是避免副作用频繁执行的关键。
清理函数用于解决副作用无法被清理的问题，确保在组件卸载时正确清理副作用。

实践练习建议

实现一个简单的计数器组件：
- 使用 useState 和 useEffect 实现一个简单的计数器组件，计数器每秒增加一次。
```
import React, { useState, useEffect } from 'react';
```
function Counter() {
const [count, setCount] = useState(0);

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

return () => {
clearInterval(intervalId);
};
}, []);

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

export default Counter;
实现一个订阅组件：
- 使用 useEffect 实现一个订阅组件，当用户订阅时，显示订阅成功的信息。
```
import React, { useState, useEffect } from 'react';
```
function SubscriptionForm() {
const [isSubscribed, setIsSubscribed] = useState(false);

useEffect(() => {
console.log(You are ${isSubscribed ? '' : 'not '}subscribed!);
return () => {
console.log('Component will unmount');
};
}, [isSubscribed]);

const handleSubscribe = () => {
setIsSubscribed(true);
};

return (
<div>
<button onClick={handleSubscribe}>
Subscribe
</button>
{isSubscribed && <p>Subscription successful!</p>}
</div>
);
}

export default SubscriptionForm;

通过这些练习，你可以更好地理解 useEffect 的用法及其在实际应用中的作用。继续实践并探索更多 useEffect 的应用场景，以提高你的 React 开发技能。如有需要，可以参考慕课网的相关教程进行更深入的学习。

點擊查看更多內容

為 TA 點贊

若覺得本文不錯，就分享一下吧！

評論

評論

共同學習，寫下你的評論

評論加載中...

展開查看更多評論

作者其他優質文章

正在加載中

絕地無雙

手記
篇

粉絲

59

獲贊與收藏

328

關注作者，訂閱最新文章

閱讀免費教程

后端通用面試教程

41個小節 32253 360

網絡編程入門教程

20個小節 13299 250

Pandas 入門教程

25個小節 19918 373

推薦

評論

收藏

共同學習，寫下你的評論



感謝您的支持，我會繼續努力的～

掃碼打賞，你說多少就多少

贊賞金額會直接到老師賬戶

支付方式

打開微信掃一掃，即可進行掃碼打賞哦

今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與放棄機會

點擊
抽獎

慕課手記新用戶專享福利

恭喜你，你的運氣太好了，居然抽中了 100個積分！

恭喜你，抽中了價值元的專欄！

太棒了，直接落到你賬戶里！

積分商城里的羅技鼠標、機械鍵盤、
Kindle 閱讀器、小米平衡車
Apple iPad （10.2英寸）、大額優惠券
在等著你去兌換了噢

作者：

免費贈送

兌換碼：1111222211 復制

優惠券可用于購買實戰課、體系課
無門檻使用

先去看看，有什么好東西馬上兌換我愛學習，選課去


亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空