第二章：React Hooks

useState

什么是 useState？

useState 是 React 提供的一个 Hook，用于在函数组件中添加和管理局部状态。它是 React Hooks 中最基础、最常用的 Hook 之一。

基本语法

import { useState } from 'react';

const [state, setState] = useState(initialState);
  • initialState: 状态的初始值，可以是任意类型（数字、字符串、对象、数组等）
  • state: 当前的状态值
  • setState: 用于更新状态的函数

使用示例

1. 计数器示例

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

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

2. 表单输入示例

function InputForm() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

  return (
    <div>
      <input 
        type="text" 
        value={inputValue} 
        onChange={handleChange} 
      />
      <p>You typed: {inputValue}</p>
    </div>
  );
}

注意事项

  1. 异步更新：状态更新是异步的，调用 setState 不会立即改变状态
  2. 函数式更新：当新状态依赖于旧状态时，应该使用函数式更新
setCount(prevCount => prevCount + 1);
  1. 对象和数组更新：需要创建新对象/数组，而不是直接修改
// 正确做法
setUser({...user, name: 'New Name'});

// 错误做法
user.name = 'New Name';
setUser(user);

常见问题

  1. 为什么我的组件没有重新渲染？

    • 确保你没有直接修改状态对象
    • 检查你是否使用了相同的引用（对于对象和数组）

  2. 如何在多个组件中共享状态？

    • 考虑使用 Context 或状态管理库
    • 或者将状态提升到共同的父组件

最佳实践

  1. 将相关的状态组合成一个对象
  2. 对于复杂的状态逻辑，考虑使用 useReducer
  3. 避免在顶层循环或条件语句中使用 Hook

总结

useState 是 React 函数组件管理状态的基石。它简单易用，但需要理解其异步特性和不可变性的要求。掌握 useState 是学习其他 React Hooks 的重要基础。

Last Updated::