当前位置：首页 > news >正文

合理使用useEffect，避免不必要的副作用

news 2026/7/10 1:39:19

在 React 中，useEffect是一个常用的钩子，用于处理副作用（例如数据获取、订阅等）。但是，如果依赖数组配置不当，会导致以下问题：
副作用重复执行：依赖数组过大或配置错误时，会触发不必要的副作用。
副作用未更新：遗漏依赖项时，副作用无法感知到最新的状态或属性。
性能问题：过多的无效副作用调用会浪费性能。

未优化代码：依赖数组配置错误

import React, { useState, useEffect } from "react"; const Counter = () => { const [count, setCount] = useState(0); const [name, setName] = useState("React"); // useEffect 中依赖数组遗漏 useEffect(() => { console.log(`计数器更新为: ${count}`); // 此处未配置依赖数组，导致每次组件渲染时都会执行副作用 }); return ( <div> <h1>计数器: {count}</h1> <button onClick={() => setCount(count + 1)}>增加计数</button> <input value={name} onChange={(e) => setName(e.target.value)} placeholder="输入你的名字" /> </div> ); }; export default Counter;

问题分析：

未配置依赖数组：

- useEffect在每次组件渲染时都会执行。
- 当name更新时，尽管与count无关，副作用仍会被触发。

性能浪费：

- 无关的副作用被频繁调用，浪费了计算资源。

优化代码：正确配置依赖数组

1. 添加依赖数组

import React, { useState, useEffect } from "react"; const Counter = () => { const [count, setCount] = useState(0); const [name, setName] = useState("React"); // useEffect 中依赖数组遗漏 useEffect(() => { console.log(`计数器更新为: ${count}`); // 此处未配置依赖数组，导致每次组件渲染时都会执行副作用 }); return ( <div> <h1>计数器: {count}</h1> <button onClick={() => setCount(count + 1)}>增加计数</button> <input value={name} onChange={(e) => setName(e.target.value)} placeholder="输入你的名字" /> </div> ); }; export default Counter;