React Hooks 系列：useState 的解析笔记

useState 是 React 中的一个 Hook，用于在函数组件中管理状态。它允许你在不编写类组件的情况下使用状态。以下是 useState 的详细用法：

基本语法

const [state, setState] = useState(initialState);

• state: 当前的状态值。
• setState: 用于更新状态的函数。
• initialState: 状态的初始值，可以是任意类型（如数字、字符串、对象、数组等）。

示例

1. 基本使用

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

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

在这个例子中，count 是状态变量，初始值为 0。setCount 是更新 count 的函数。点击按钮时，count 会增加 1。

2. 使用对象作为状态

import React, { useState } from 'react';

function UserForm() {
  const [user, setUser] = useState({ name: '', age: '' });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setUser(prevUser => ({
      ...prevUser,
      [name]: value
    }));
  };

  return (
    <form>
      <input
        type="text"
        name="name"
        value={user.name}
        onChange={handleChange}
        placeholder="Name"
      />
      <input
        type="number"
        name="age"
        value={user.age}
        onChange={handleChange}
        placeholder="Age"
      />
      <p>Name: {user.name}, Age: {user.age}</p>
    </form>
  );
}

在这个例子中，user 是一个对象状态，包含 name 和 age 两个属性。setUser 用于更新 user 对象。handleChange 函数通过展开运算符 (...) 来保留其他属性的值，只更新当前输入字段的值。

3. 使用函数初始化状态

如果初始状态需要通过复杂计算得到，可以传递一个函数给 useState，该函数只会在初始渲染时执行一次。

import React, { useState } from 'react';

function ExpensiveInitialState() {
  const [state, setState] = useState(() => {
    const initialState = someExpensiveComputation();
    return initialState;
  });

  return <div>{state}</div>;
}

注意事项

1. 异步更新：setState 是异步的，调用 setState 后，状态不会立即更新。如果需要基于前一个状态更新，可以使用函数形式：

   setCount(prevCount => prevCount + 1);

2. 合并更新：与类组件的 setState 不同，useState 不会自动合并对象。如果需要更新对象中的某个属性，需要手动合并：

   setUser(prevUser => ({
     ...prevUser,
     name: 'New Name'
   }));

3. 避免在渲染时调用 setState：在渲染时调用 setState 会导致无限循环。确保 setState 只在事件处理函数或其他副作用中调用。

总结

useState 是 React 中管理状态的基础 Hook，适用于各种场景。通过合理使用 useState，你可以在函数组件中轻松管理状态，构建动态和交互式的用户界面。