React - useState

useState 是 React 中一个非常重要的 Hook，用于在函数组件中添加和管理状态。在 React 中，状态是组件内部的数据，当状态发生变化时，组件会重新渲染以反映最新的状态。

基本用法

useState 的基本用法如下：

javascript
import React, { useState } from 'react';

function Example() {
  // 声明一个名为 "count" 的状态变量，初始值为 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

解释

导入 useState：

javascript
import React, { useState } from 'react';

声明状态变量：
```
javascript
const [count, setCount] = useState(0);
```
- useState(0) 返回一个数组，其中第一个元素是当前的状态值（count），第二个元素是一个函数（setCount），用于更新状态。
- 0 是状态的初始值。

使用状态：

javascript
<p>You clicked {count} times</p>

更新状态：
```
javascript
<button onClick={() => setCount(count + 1)}>
  Click me
</button>
```
- 当用户点击按钮时，setCount(count + 1) 会被调用，更新 count 的值。
- 状态更新后，组件会重新渲染，显示最新的 count 值。

状态更新函数

setCount 是 useState 返回的更新函数，用于更新状态。你可以传递一个新的状态值给 setCount，或者传递一个函数，该函数接收当前状态并返回新的状态。

效果如下，点击按钮，上面的次数会更着变化

直接传递新值

javascript
setCount(count + 1);

传递函数

javascript
setCount(prevCount => prevCount + 1);

传递函数的好处是，它确保你总是基于最新的状态来更新状态。这在某些情况下（例如连续多次更新状态）非常重要。

多个状态变量

你可以在一个组件中使用多个 useState 来管理多个状态变量。

javascript
function ExampleWithMultipleStates() {
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);

  return (
    <div>
      <p>Age: {age}</p>
      <p>Favorite Fruit: {fruit}</p>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo.text}</li>
        ))}
      </ul>
    </div>
  );
}

状态的初始化

useState 的初始状态参数可以是任何类型的值，包括对象、数组、函数等。

初始状态为对象

javascript
const [user, setUser] = useState({ name: 'John', age: 30 });

初始状态为函数

javascript
const [count, setCount] = useState(() => {
  // 计算初始值
  return someExpensiveComputation();
});

注意！！！

状态更新是异步的：
- 当你调用 setCount 时，React 不会立即更新状态，而是在下一次渲染时更新。因此，不要依赖于当前渲染中的状态值来计算下一个状态。
状态更新函数是稳定的：
- setCount 函数在组件的生命周期内是稳定的，不会在重新渲染时发生变化。因此，你可以安全地在依赖项数组中使用它。

总结

useState 是 React 中用于在函数组件中添加和管理状态的 Hook。
它返回一个数组，包含当前状态值和一个更新状态的函数。
你可以使用 useState 来管理多个状态变量。
状态更新可以是直接传递新值，也可以是传递一个函数来基于当前状态计算新状态。
状态更新是异步的，状态更新函数在组件的生命周期内是稳定的。

目录