React之userEffect的使用

embedded/2025/3/11 8:40:19/

一、userEffect是什么

在React组件中，副作用操作是指那些会被影响的其他的组件，而且不能在渲染过程中完成相关操作。其中，常见的副作用就是从API接口中获取数据。而 useEffect 提供了一种在函数组件中处理副作用的方式，使得函数组件也能处理这些复杂的逻辑。

二、怎么使用

useEffect 函数接收两个参数：

第一个参数：是一个回调函数，该回调函数包含了副作用操作的代码。
第二个参数：是一个可选的依赖项数组，用于控制 useEffect 的执行时机。
回调函数、依赖项

import React, { useEffect } from 'react';function Example() {useEffect(() => {// 副作用操作代码console.log('副作用操作执行');}, []); // 依赖项数组return <div>示例组件</div>;
}export default Example;

三、不同的使用场景

1、.仅在组件挂载时执行一次（依赖项数组为空）

import React, { useEffect } from 'react';function ComponentDidMountExample() {useEffect(() => {console.log('组件挂载完成');// 清理函数，在组件卸载时执行return () => {console.log('组件卸载');};}, []);return <div>仅在挂载时执行一次的示例</div>;
}export default ComponentDidMountExample;

2、在组件挂载和更新时都执行（不传递依赖项数组）

import React, { useState, useEffect } from 'react';function EveryRenderExample() {const [count, setCount] = useState(0);useEffect(() => {console.log('组件挂载或更新');});return (<div><p>计数: {count}</p><button onClick={() => setCount(count + 1)}>增加</button></div>);
}export default EveryRenderExample;

3、仅在特定依赖项变化时执行

import React, { useState, useEffect } from 'react';function DependencyChangeExample() {const [count, setCount] = useState(0);const [name, setName] = useState('');useEffect(() => {console.log('count 或 name 发生变化');}, [count, name]);return (<div><p>计数: {count}</p><button onClick={() => setCount(count + 1)}>增加</button><inputtype="text"value={name}onChange={(e) => setName(e.target.value)}/></div>);
}export default DependencyChangeExample;