React 你应该避免的4中 useState 用法及修正方案

介绍

React.js 已经成为现代网页开发的基石，其在组件内部管理状态的独特方法备受推崇。其中一个常见的钩子 useState 是基础但经常被误用的。了解并避免这些常见错误对于想要创建高效、无 Bug 应用的初学者和经验丰富的开发者来说至关重要。

本博客将深入探讨在 React 中使用 useState 时需要避免的四个关键错误。让我们一起提升我们的 React 技能吧！

错误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}</p>  
      <button onClick={incrementCounter}>增加</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}</p>  
      <button onClick={incrementCounter}>增加</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>姓名：{profile.name}</p>  
      <p>年龄：{profile.age}</p>  
      <button onClick={updateAge}>更新年龄</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>姓名：{profile.name}</p>  
      <p>年龄：{profile.age}</p>  
      <button onClick={updateAge}>更新年龄</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);  
    // 开发者期望 count 被增加两次  
  };  
  
  return (  
    <div>  
      <p>计数：{count}</p>  
      <button onClick={incrementCount}>增加计数</button>  
    </div>  
  );  
};  
  
export default AsyncCounterComponent;

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

✅ 更正：

为了正确处理异步更新，使用 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}</p>  
      <button onClick={incrementCount}>增加计数</button>  
    </div>  
  );  
};  
  
export default AsyncCounterComponent;

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

错误4：误用状态派生数据 📊

❌ 错误理解

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

例如：

import React, { useState } from 'react';  
  
const GreetingComponent = ({ name }) => {  
  const [greeting, setGreeting] = useState(`Hello, ${name}`);  
  
  return (  
    <div>{greeting}</div>  
  );  
};  
  
export default GreetingComponent;

在这里，greeting 状态是多余的，因为它可以直接从 name 派生而来。

✅ 更正：

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

import React from 'react';  
  
const GreetingComponent = ({ name }) => {  
  const greeting = `Hello, ${name}`; // 直接从属性派生  
  return (  
    <div>{greeting}</div>  
  );  
};  
  
export default GreetingComponent;

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

结论 🚀

在 React 中有效地使用 useState 钩子对于构建可靠和高效的应用至关重要。通过了解和避免常见的错误，如忽略先前状态、管理状态不可变性不当、忽视异步更新和避免为派生数据使用多余状态，你可以确保组件行为更加流畅和可预测。牢记这些见解，以提升你的 React 开发之旅，并创建更加健壮的应用。