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

在 React 中，useEffect是一个常用的钩子，用于处理副作用（例如数据获取、订阅等）。但是，如果依赖数组配置不当，会导致以下问题：

1. 副作用重复执行：依赖数组过大或配置错误时，会触发不必要的副作用。
2. 副作用未更新：遗漏依赖项时，副作用无法感知到最新的状态或属性。
3. 性能问题：过多的无效副作用调用会浪费性能。

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

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;

问题分析：

1. 未配置依赖数组：

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

1. 性能浪费：

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

---

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

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;

优化效果：

• 只有当count变化时，useEffect才会执行副作用。
• 不再因为name的更新触发无意义的副作用。