轻松学会 React 钩子：以 useEffect() 为例

**轻松学会 React 钩子：以 useEffect() 为例**

React 是一个流行的 JavaScript 库，用于构建用户界面。其中一个重要的特性是钩子（Hooks），它允许函数组件在类组件中使用状态和生命周期方法。今天，我们将重点讨论 `useEffect()` 钩子，这是一个非常有用的钩子。

**什么是 useEffect() 钩子？**

`useEffect()` 钩子用于在组件渲染后执行某些操作，例如设置定时器、发送网络请求或清除事件监听器。它接受两个参数：一个函数和一个依赖数组。

**useEffect() 钩子的基本用法**

jsximport React, { useEffect } from 'react';

function MyComponent() {
 useEffect(() => {
 console.log('组件渲染后执行');
 }, []);

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

在这个例子中，我们使用 `useEffect()` 钩子来在组件渲染后输出一个消息。第二个参数是空数组 `[]`，这意味着钩子只会在组件首次渲染时执行。

**useEffect() 钩子的依赖**

jsximport React, { useEffect } from 'react';

function MyComponent() {
 const [count, setCount] = React.useState(0);

 useEffect(() => {
 console.log('count 变化后执行');
 }, [count]);

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

在这个例子中，我们使用 `useEffect()` 钩子来监听 `count` 的变化。当 `count` 变化时，钩子会执行。第二个参数是 `[count]`，这意味着钩子只会在 `count` 变化时执行。

**清除 useEffect() 钩子的副作用**

有时，我们需要清除 `useEffect()` 钩子的副作用，以防止内存泄漏或其他问题。我们可以使用 `useEffect()` 钩子的返回值来实现这一点。

jsximport React, { useEffect } from 'react';

function MyComponent() {
 const [count, setCount] = React.useState(0);

 useEffect(() => {
 console.log('count 变化后执行');
 return () => {
 console.log('清除副作用');
 };
 }, [count]);

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

在这个例子中，我们使用 `useEffect()` 钩子的返回值来清除副作用。当组件卸载时，钩子会执行清除副作用的函数。

**总结**

`useEffect()` 钩子是一个非常有用的钩子，它允许我们在组件渲染后执行某些操作。它接受两个参数：一个函数和一个依赖数组。通过使用 `useEffect()` 钩子，我们可以轻松地实现各种功能，例如设置定时器、发送网络请求或清除事件监听器。

**参考**

* React 官方文档： CodeSandbox： `useEffect()` 钩子！