useState() 的使用及场景

useState是 React提供的一个Hook函数，用于在函数组件中添加和管理状态。它允许你在函数组件中定义一个可变的状态，并在组件的生命周期中对状态进行更新和访问。

使用useState可以避免使用类组件时需要定义和管理繁琐的constructor，state和setState。它简化了状态管理的过程，使得函数组件的写法更加简洁和易于理解。

useState的基本用法如下：

import React, { useState } from 'react';

function MyComponent() {
  // 使用useState定义状态和更新状态的函数
  const [count, setCount] = useState(0);

  // 在组件中使用状态
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
      <button onClick={() => setCount(count - 1)}>Decrease</button>
    </div>
  );
}

使用useState定义了一个名为count的状态变量和一个名为setCount的用于更新该状态的函数。

useState返回一个数组，数组的第一个元素是当前状态的值，而第二个元素是用于更新状态的函数。使用数组解构赋值方式，将这两个值分别赋给count和setCount。

可以在组件内部使用count变量来展示当前的计数值，而通过调用setCount函数来更新计数值。每次状态更新时，React会自动重新渲染组件以反映新的状态值。

需要注意的是，在调用setCount函数时，我们可以传递一个新的值给它，也可以使用函数式更新的方式，接收到当前状态的值并返回基于当前状态计算出的新值。

这就是useState的，它是React函数组件中进行状态管理的重要工具之一。

什么时候需要使用 useState()

在React函数组件中，有一些情况下你可能需要使用useState来管理状态。

1. 组件内部需要维护和更新数据：如果你的组件需要维护一些数据，并在用户操作或其他事件触发时更新这些数据，那么可以使用useState来定义并更新这些状态。
2. 需要在UI中显示和使用组件的状态：useState可以帮助你在组件的渲染过程中展示状态的值，以便让用户看到这些数据。你可以将状态的值直接插入到JSX中，实时地反映状态的变化。
3. 局部状态管理：useState适用于组件内部的局部状态管理，即只在当前组件中维护和使用状态。如果你只需要在当前组件内部使用状态，并不需要在其他组件间共享这些状态，那么useState是个很好的选择。
4. 业务逻辑相对简单：useState适合管理相对简单的状态。当状态的逻辑较为复杂、需要依赖多个状态或需要进行大量计算时，你可能需要考虑使用其他更适合的状态管理方案，比如使用useReducer或使用全局状态管理库。

总之，当你需要在React函数组件中管理某个组件内部的局部状态，并希望在UI中显示和使用这些状态时，可以使用useState来定义和更新状态。它是React提供的一种简单、轻量级的状态管理方案。

示例：

挑战: 修复卡住的输入表单

State：组件的记忆 – React 中文文档 (docschina.org)

当你输入字段时，什么也没有出现。这就像输入值被空字符串给“卡住”了。第一个 <input> 的 value 设置为始终匹配 firstName 变量，第二个 <input> 的 value 设置为始终匹配 lastName 变量。这是对的。两个输入框都有 onChange 事件处理函数，它尝试根据最新的用户输入（e.target.value）更新变量。但是，变量似乎并没有在重新渲染时“记住”它们的值。通过使用 state 变量来解决此问题。

问题代码：

export default function Form() {
  let firstName = '';
  let lastName = '';

  function handleFirstNameChange(e) {
    firstName = e.target.value;
  }

  function handleLastNameChange(e) {
    lastName = e.target.value;
  }

  function handleReset() {
    firstName = '';
    lastName = '';
  }

  return (
    <form onSubmit={e => e.preventDefault()}>
      <input
        placeholder="First name"
        value={firstName}
        onChange={handleFirstNameChange}
      />
      <input
        placeholder="Last name"
        value={lastName}
        onChange={handleLastNameChange}
      />
      <h1>Hi, {firstName} {lastName}</h1>
      <button onClick={handleReset}>Reset</button>
    </form>
  );
}

答案：
首先，从 React 导入 useState。然后用 useState 声明的 state 变量替换 firstName 和 lastName。最后，用 setFirstName(...) 替换每个 firstName = ... 赋值，并对 lastName 做同样的事情。不要忘记更新 handleReset，以使重置按钮生效。

  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');

什么时候不需要使用 useState()

useState是React中管理状态的常见方式，但并不是在所有情况下都应该使用它。以下是一些情况下可以考虑不使用useState的情况：

1. 不需要状态管理：如果你的组件没有需要更新和共享的状态，或者只有一次性的操作，那么使用useState可能会显得多余。在这种情况下，你可以简单地使用函数组件来展示静态内容。
2. 使用其他状态管理库：如果你正在使用其他的状态管理库（如Redux或MobX），并且已经通过这些库进行了全局状态的管理，那么在一个局部的组件中使用useState可能会导致状态的冗余和不一致。在这种情况下，你可以通过和状态管理库进行配合来管理组件的状态。
3. 需要共享状态：如果你需要在多个组件之间共享状态，而不仅仅是在单个组件内部使用，那么useState可能无法满足需求。在这种情况下，你可以考虑使用更高级的状态管理方案，如全局状态管理库或上下文（Context）来管理共享状态。
4. 需要复杂的状态更新逻辑：如果你的状态更新逻辑相对复杂，或者需要依赖于其他状态的更新结果，那么仅使用useState可能会导致代码变得混乱和难以维护。在这种情况下，你可以考虑自定义Hook或使用useReducer来更好地管理状态更新逻辑。

总之，useState是React中一种常见的状态管理方式，但它并不是适用于所有情况的唯一选择。根据具体的场景和需求，你可以自由选择适合的状态管理方案。

示例代码：

例如以下代码是不需要使用 useState

import { useState } from 'react';

export default function FeedbackForm() {
  const [name, setName] = useState('');

  function handleClick() {
    setName(prompt('What is your name?'));
    alert(`Hello, ${name}!`);
  }

  return (
    <button onClick={handleClick}>
      Greet
    </button>
  );
}

修改后：

直接 let 变量声明即可

// import { useState } from 'react';

export default function FeedbackForm() {
  // const [name, setName] = useState('');

  function handleClick() {
    const name = (prompt('What is your name?'));
    alert(`Hello, ${name}!`);
  }

  return (
    <button onClick={handleClick}>
      Greet
    </button>
  );
}