为何useState在函数组件中可用，在类组件中报错？

核心原因很简单：useState是React专门为函数组件设计的Hooks API，类组件有自己独立的状态管理机制，两者不能混用。

1. 函数组件的状态逻辑：用Hooks #

函数组件本身是无状态的，Hooks（比如useState）的出现就是为了让函数组件能拥有状态、处理副作用等原本只有类组件才有的能力。只要在函数组件的顶层作用域调用useState（不能嵌套在条件、循环里），就是完全符合React规则的，所以你写的Login组件能正常运行。

2. 类组件的状态逻辑：用this.state #

类组件的状态管理是基于类实例的，必须通过this.state初始化状态，用this.setState()更新状态。你写的类组件示例之所以报错，就是因为违反了这个规则，强行在类组件里用了只属于函数组件的Hooks。

正确的类组件状态写法应该是这样：

class Sidebar extends React.Component {
  // 初始化状态
  constructor(props) {
    super(props);
    this.state = {
      user: { username: '', password: '' }
    };
  }

  // 更新状态的方法示例
  handleUserChange = (newUsername, newPassword) => {
    this.setState({
      user: { username: newUsername, password: newPassword }
    });
  }

  render() {
    // 在render里通过this.state.user访问状态
    return (
      <div>
        <input 
          value={this.state.user.username}
          onChange={(e) => this.handleUserChange(e.target.value, this.state.user.password)}
        />
      </div>
    );
  }
}

3. 为什么类组件不能用Hooks？ #

React Hooks的底层实现依赖于函数组件的调用顺序和React的函数式调度逻辑，而类组件是基于ES6类的实例化机制，两者的运行原理完全不同。React官方明确规定：Hooks只能在函数组件或自定义Hooks的顶层使用，禁止在类组件、类的方法里调用任何Hooks，否则会直接触发报错。

内容的提问来源于stack exchange，提问作者albert