React 初学者要知道的4个 useState 错误用法

本文是翻译作品，原文链接：4 useState Mistakes You Should Avoid in React🚫

引言

React.js 已成为现代 web 开发的基础设施，其对组件内状态管理的独特方法颇受欢迎。一个常用的钩子------useState------虽然简单但经常被误用。对于初学者来说，理解并避免这些常见错误对于创建高效无误的 Web 应用至关重要。

本博客将深入探讨在使用 React 的 useState 时需要避免的四个关键错误。让我们一起搞定这些问题吧！

错误 1: 忘记考虑前一个状态 😨

在使用 React 的 useState 钩子时，一个常见的错误是在更新状态时没有考虑到最新的状态。特别是当你处理快速或多次状态更新时，这种疏忽可能导致意外的行为。

❌ 错误用法

假设你在 React 中构建一个计数器。你的目标是每次点击按钮时增加计数。一个直观的方法可能是简单地将 1 添加到当前状态值中。然而，这可能会出现问题。

import React, { useState } from 'react';

const CounterComponent = () => {
  const [counter, setCounter] = useState(0);

  const incrementCounter = () => {
    setCounter(counter + 1); // 可能不总是按预期工作
  };

  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={incrementCounter}>Increment</button>
    </div>
  );
};

export default CounterComponent;

在上述代码中，incrementCounter 根据其当前值更新计数器。这看起来很直观，但可能导致问题。React 可能会将多个 setCounter 调用批处理在一起，或者其他状态更新可能会干扰，导致计数器不总是正确更新。

✅ 正确用法

为了避免这个问题，使用 setCounter 方法的函数形式。函数形式的用法可接受一个函数作为其参数，React 会用最新的状态值调用这个函数。这确保你总是在使用状态的最新值。

import React, { useState } from 'react';

const CounterComponent = () => {
  const [counter, setCounter] = useState(0);

  const incrementCounter = () => {
    setCounter(prevCounter => prevCounter + 1); // 基于最新状态正确更新
  };

  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={incrementCounter}>Increment</button>
    </div>
  );
};

export default CounterComponent;

在这个更正的代码中，incrementCounter 使用一个函数来更新状态。这个函数接收最新的状态（prevCounter）并返回更新的状态。这种方法在更新迅速或连续多次发生时更为可靠。

错误 2: 忽视状态的不可变性 🧊

❌ 错误用法

在 React 中，状态应该被视为不可变的。一个常见的错误是直接改变状态，特别是对于像对象和数组这样的复杂数据结构。

考虑以下带有状态对象的错误方法：

import React, { useState } from 'react';

const ProfileComponent = () => {
  const [profile, setProfile] = useState({ name: 'John', age: 30 });

  const updateAge = () => {
    profile.age = 31; // 直接改变状态
    setProfile(profile);
  };

  return (
    <div>
      <p>Name: {profile.name}</p>
      <p>Age: {profile.age}</p>
      <button onClick={updateAge}>Update Age</button>
    </div>
  );
};

export default ProfileComponent;

这段代码错误地直接改变了 profile 对象。这样的改变不会触发重新渲染，并导致不可预测的行为。

✅ 正确用法

更新状态时，总是创建一个新的对象或数组以保持不可变性。我们可以使用扩展运算符来实现这一点。

import React, { useState } from 'react';

const ProfileComponent = () => {
  const [profile, setProfile] = useState({ name: 'John', age: 30 });

  const updateAge = () => {
    setProfile({...profile, age: 31}); // 正确更新状态
  };

  return (
    <div>
      <p>Name: {profile.name}</p>
      <p>Age: {profile.age}</p>
      <button onClick={updateAge}>Update Age</button>
    </div>
  );
};

export default ProfileComponent;

在修改后的中，updateAge 使用扩展运算符创建了一个具有更新后年龄的新 profile 对象，保持了状态的不可变性。

错误 3: 误解异步更新 ⏳

❌ 错误用法

React 通过 useState 的状态更新是异步的。这经常导致混淆，特别是当快速连续进行多次状态更新时。开发者可能期望在一个 setState 调用后状态立即改变，但实际上，出于性能原因，React 会批处理这些更新。

让我们看一个常见的误解可能导致问题的场景：

import React, { useState } from 'react';

const AsyncCounterComponent = () => {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
    setCount(count + 1);
    // 开发者期望计数增加两次
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment Count</button>
    </div>
  );
};

export default AsyncCounterComponent;

在这个例子中，开发者意图是将计数增加两次。然而，由于状态更新的异步性质，两次 setCount 调用都是基于相同的初始状态，结果只增加了一次计数。

✅ 正确用法

要正确处理异步更新，使用 setCount 的函数更新形式。这确保了每次更新都是基于最新状态。

import React, { useState } from 'react';

const AsyncCounterComponent = () => {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(prevCount => prevCount + 1);
    setCount(prevCount => prevCount + 1);
    // 现在每次更新都正确地依赖于最新状态
  };
  // 可选：使用 useEffect 来查看更新后的状态
  useEffect(() => {
    console.log(count); // 2
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment Count</button>
    </div>
  );
};

export default AsyncCounterComponent;

在上述代码中，每次调用 setCount 都使用状态的最新值，确保了准确和顺序的更新。这种方法对于依赖当前状态的操作至关重要，特别是当快速连续发生多次状态更新时。

错误 4: 错误使用状态来表示派生数据 📊

❌ 错误用法

一个常见的错误是使用 useState 来存储可以从现有状态或属性派生的数据。这种冗余的状态可能导致代码复杂且容易出错。

例如：

import React, { useState } from 'react';

const GreetingComponent = ({ name }) => {
  const [greeting, setGreeting] = useState(`Hello, ${name}`);

  return (
    <div>{greeting}</div>
  );
};

export default GreetingComponent;

这里，greeting 状态是不必要的，因为它可以直接从 name 派生。

✅ 正确用法

不要使用 useState，而是直接从现有状态或属性派生数据。

import React from 'react';

const GreetingComponent = ({ name }) => {
  const greeting = `Hello, ${name}`; // 直接从属性派生

  return (
    <div>{greeting}</div>
  );
};

export default GreetingComponent;

在更改后的代码中，greeting 直接从 name 属性计算得出，简化了组件并避免了不必要的状态管理。

结论 🚀

有效使用 React 中的 useState 钩子对于构建可靠和高效的应用程序至关重要。通过理解和避免常见的错误------如忽视前一个状态、错误管理状态的不可变性、忽视异步更新以及避免为派生数据使用冗余状态------你可以确保组件行为更加平滑和可预测。牢记这些大坑，以提升你的 React 应用稳定性。