React 的 useState 钩子是管理功能组件中状态的重要工具，但很容易陷入一些常见的陷阱。无论您是刚刚开始使用 React 还是已经使用它一段时间了，避免这些错误都可以帮助您避免意外的错误和性能问题。

让我们来看看 10 个常见错误以及如何避免它们以编写更简洁、更高效的代码。

1. 初始状态类型错误

当初始状态类型与状态更新期间预期的类型不匹配时，会出现最常见的问题之一。

❌错误：初始状态类型不匹配

const [count, setCount] = useState(0);
setCount("1"); // Error: Argument of type 'string' is not assignable to parameter of type 'number'.

✅ 解决方案：使用 TypeScript 或显式指定类型。

const [count, setCount] = useState(0);
setCount(1); // No issues now.

2.不使用功能更新

根据先前的值更新状态时，直接引用当前状态可能会导致值过时，尤其是在异步操作中。

❌错误：直接使用当前状态

setCount(count   1); // Can cause bugs in async scenarios.

✅解决方案：使用函数形式进行安全更新。

setCount((prevCount) => prevCount   1); // Ensures you always have the latest value.

3. 存储派生状态

避免将值存储在可以从其他状态或道具派生的状态中。这可能会导致不必要的重新渲染和同步问题。

❌ 错误：存储派生状态

const [count, setCount] = useState(0);
const [doubleCount, setDoubleCount] = useState(count * 2);

✅ 解决方案：在渲染期间导出值而不是使用状态。

const [count, setCount] = useState(0);
const doubleCount = count * 2; // No need to store this in state.

4. 渲染阶段内的状态更新

在渲染阶段调用 setState 会导致无限循环和性能问题。

❌错误：在渲染期间设置状态

const [count, setCount] = useState(0);
setCount(1); // Infinite loop!

✅解决方案：在事件处理程序或效果中触发状态变化。

const handleClick = () => setCount(1);

5. 直接改变状态

如果直接改变状态，React 将不会检测到更改，尤其是对于数组或对象。

❌错误：直接改变状态

const [items, setItems] = useState([1, 2, 3]);
items.push(4); // Mutation happens here, React won’t re-render!

✅解决方案：返回一个新的数组或对象来触发重新渲染。

setItems((prevItems) => [...prevItems, 4]); // Spread to create a new array.

6. 复杂状态的未定义或不正确的类型

处理复杂状态时，未定义正确的类型可能会导致运行时问题和混乱。

❌错误：隐式类型可能导致错误

const [user, setUser] = useState({ name: "", age: 0 });
setUser({ name: "John", age: "thirty" }); // Type error: Age should be a number.

✅解决方案：用正确的类型定义状态的形状。

type User = { name: string; age: number };
const [user, setUser] = useState({ name: "", age: 0 });

7. 将状态用于可变值（如计时器）

对不影响渲染的值（例如计时器）使用 useState 会导致不必要的重新渲染。

❌ 错误：使用状态来表示可变值

const [timerId, setTimerId] = useState(null);

✅ 解决方案：对不需要重新渲染的可变值使用 useRef。

const timerIdRef = useRef(null);

8. 没有正确合并状态对象

与类组件不同，useState 不会自动合并更新。忘记这一点可能会导致覆盖您的部分状态。

❌错误：覆盖状态而不是合并

const [user, setUser] = useState({ name: '', age: 0 });
setUser({ age: 25 }); // The 'name' field is now lost!

✅ 解决方案：使用展开运算符合并状态更新。

setUser((prevUser) => ({ ...prevUser, age: 25 })); // Merges with existing state.

9. 使用状态进行高频更新

跟踪状态中的窗口尺寸等高频值可能会因过度重新渲染而导致性能问题。

❌错误：使用状态进行频繁更新

const [size, setSize] = useState(window.innerWidth);
window.addEventListener("resize", () => setSize(window.innerWidth));

✅解决方案：使用useRef或debounce来减少性能损失。

const sizeRef = useRef(window.innerWidth);
useEffect(() => {
  const handleResize = () => {
    sizeRef.current = window.innerWidth;
  };
  window.addEventListener("resize", handleResize);
  return () => window.removeEventListener("resize", handleResize);
}, []);

10. 假设状态更新是同步的

React 状态更新是异步的，但许多开发人员错误地认为更改会立即应用。

❌错误：假设状态更改是立即的

setCount(count   1);
console.log(count); // Logs the old value, not the updated one!

✅解决方案：使用useEffect跟踪状态变化并确保使用最新的值。

useEffect(() => {
  console.log(count); // Logs the updated value after re-render.
}, [count]);

最后的想法？

避免这些 useState 陷阱将使您的 React 代码更加健壮、可读和高性能。了解 React 的状态机制如何工作并了解最佳实践将节省您的调试时间并增强您的整体开发体验。

您有什么 useState 技巧或错误可以分享吗？将它们放在下面的评论中！ ？