React之userEffect的使用
目录
React之userEffect的使用
一、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>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</div>
);
}
export default DependencyChangeExample;四、使用的好处
代码复用
：
useEffect
可以将副作用逻辑封装在一个函数中，提高代码的复用性。
逻辑分离 ：将副作用操作与组件的渲染逻辑分离，使代码更加清晰和易于维护。
函数式编程
：使用
useEffect
可以在函数组件中处理副作用，避免了类组件的复杂性，使代码更符合函数式编程的思想。