使用React Hooks时是否应放弃Class组件语法？

先直接回应你的核心困惑：这不是export default class语法的问题，而是React Hooks的硬性规则限制——你绝对不能在Class组件内部调用任何Hooks。你遇到的Invalid hook call错误完全符合预期：Hooks的设计逻辑就是只能在函数组件的顶层作用域，或者自定义Hook的顶层作用域中调用，Class组件的render方法（或任何Class的方法、生命周期函数）都不属于这个范畴。

你提到父Class组件能正常运行，这是因为父组件只是作为容器渲染了函数式的Counter组件，并没有在父Class组件内部调用任何Hooks，完全符合规则。

如果想继续用Class组件，该如何替代Hooks实现Redux功能？ #

你不需要放弃Class语法，但必须改用Class组件适配Redux的经典方案：connect高阶组件（来自react-redux），而非直接使用useAppSelector/useAppDispatch这类Hook。

给你改写一个正确的Class版Counter组件：

import React from 'react';
import { connect } from 'react-redux';
import { decrement, increment, incrementByAmount, incrementAsync, incrementIfOdd, selectCount } from './counterSlice';
import styles from './Counter.module.css';

// 定义组件接收的props类型
interface CounterProps {
  count: number;
  decrement: () => void;
  increment: () => void;
  incrementByAmount: (amount: number) => void;
  incrementAsync: (amount: number) => void;
  incrementIfOdd: (amount: number) => void;
}

// 组件内部状态类型
interface CounterState {
  incrementAmount: string;
}

class Counter extends React.Component<CounterProps, CounterState> {
  constructor(props: CounterProps) {
    super(props);
    this.state = {
      incrementAmount: '2'
    };
  }

  render() {
    const { incrementAmount } = this.state;
    const incrementValue = Number(incrementAmount) || 0;
    const { count, decrement, increment, incrementByAmount, incrementAsync, incrementIfOdd } = this.props;

    return (
      <div>
        <div className={styles.row}>
          <button className={styles.button} aria-label="Decrement value" onClick={decrement}>
            -
          </button>
          <span className={styles.value}>{count}</span>
          <button className={styles.button} aria-label="Increment value" onClick={increment}>
            +
          </button>
        </div>
        <div className={styles.row}>
          <input 
            className={styles.textbox} 
            aria-label="Set increment amount" 
            value={incrementAmount} 
            onChange={(e) => this.setState({ incrementAmount: e.target.value })} 
          />
          <button className={styles.button} onClick={() => incrementByAmount(incrementValue)}>
            Add Amount
          </button>
          <button className={styles.asyncButton} onClick={() => incrementAsync(incrementValue)}>
            Add Async
          </button>
          <button className={styles.button} onClick={() => incrementIfOdd(incrementValue)}>
            Add If Odd
          </button>
        </div>
      </div>
    );
  }
}

// 把Redux状态映射到组件props
const mapStateToProps = (state: any) => ({
  count: selectCount(state)
});

// 把Redux action creators映射到组件props
const mapDispatchToProps = {
  decrement,
  increment,
  incrementByAmount,
  incrementAsync,
  incrementIfOdd
};

// 通过connect包装组件，注入Redux相关props
export default connect(mapStateToProps, mapDispatchToProps)(Counter);

这个版本用this.state替代useState，用connect替代Redux Hooks，完全符合Class组件的写法，编译运行不会有问题。

当前React生态下，继续用Class组件是否明智？ #

这得结合你的场景判断：

• 如果是维护现有Class组件代码：完全没问题，React官方明确表示Class组件不会被废弃，现有代码可以长期运行，也会持续接收bug修复。
• 如果是开发新项目/新功能：更推荐转向函数式组件+Hooks，原因有几点：
  1. React的新特性（比如Server Components、Suspense数据请求、Transition API等）几乎都是为函数式组件设计的，Class组件无法使用这些能力。
  2. 社区生态全面转向Hook：现在大部分新的React库、工具、教程都优先支持Hook，Class组件的相关资源会越来越少。
  3. 代码更简洁：Hook可以让你在不编写Class的情况下复用状态逻辑，避免了Class中this绑定、生命周期拆分等繁琐问题，结合TypeScript时，函数式组件的类型推导也更直观。
  4. Redux Toolkit等现代状态管理库的最佳实践基于Hook，Class方式的connect虽然还能用，但已不是主推方案。

从你的背景（Angular类式开发转React+TS）来看，建议逐步适应函数式组件+Hook的写法——虽然初期有转换成本，但长期来看，这能让你更好地融入React生态，利用更多现代特性。

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