useState 如何使用在 class 组件中

`useState` 是 React 16.8 引入的 Hook，只能在函数组件中使用。如果你需要在类组件中使用类似的功能，可以使用 `this.state` 和 `this.setState` 方法。

例如，以下是一个简单的计数器类组件，它使用 `this.state` 来定义状态变量 `count` 和更新函数 `setCount`，并在页面上展示当前计数器的值和两个按钮，一个用于增加计数器值，另一个用于减少计数器值：

import React from 'react';

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.increment = this.increment.bind(this);
    this.decrement = this.decrement.bind(this);
  }

  increment() {
    this.setState({ count: this.state.count + 1 });
  }

  decrement() {
    this.setState({ count: this.state.count - 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increase</button>
        <button onClick={this.decrement}>Decrease</button>
      </div>
    );
  }
}

export default Counter;

在上面的代码中，`this.state` 的初始值为 `{ count: 0 }`，`increment` 和 `decrement` 方法分别用于增加和减少计数器值，并通过 `this.setState` 更新 `count` 的值。在 `render` 方法中，组件展示了当前计数器的值和两个按钮，通过 `onClick` 属性绑定对应的方法。

需要注意的是，在类组件中使用 `this.state` 和 `this.setState` 方法相对于使用 `useState` 钩子来说，会使代码变得更加冗长，而且也不如钩子使用起来方便。因此，在可行的情况下，推荐使用函数组件和钩子来实现组件的状态管理。