前端/移动开发面试题更新 2026-08-05

在 React 开发中,使用 React.createClass 与通过 extends Component 创建组件类,这两种方式在实现上存在哪些关键差异?

前端/移动开发技术原理方案权衡React

考察说明

考察对 React 组件定义方式演进与核心差异的理解。

回答思路

  1. 【回答框架 1】React.createClass 是 ES5 时代的 API,通过传入包含 render 等方法的配置对象来创建组件;而 extends Component 是 ES6 类语法,通过继承 React.Component 类实现,两者本质都是构造函数,但语法与内部绑定机制不同。
  2. 【回答框架 2】关键差异之一是 this 绑定:createClass 会自动将组件方法绑定到实例上,无需手动处理;而类组件中方法默认不绑定,需在 constructor 中 bind 或使用箭头函数作为类属性,否则 this 会指向 undefined,导致事件处理器无法访问组件实例。
  3. 【回答框架 3】另一个关键差异是 mixins 支持:createClass 内置 mixins 机制用于复用组件间逻辑;而 ES6 类组件不支持 mixins,官方推荐使用高阶组件、render props 或 hooks 来替代,这影响了代码组织与复用模式。
  4. 【回答框架 4】createClass 会调用 React 的自动绑定与类型校验(如 propTypes 的默认值通过 getDefaultProps 定义),而类组件中使用静态属性 defaultProps 和 propTypes 声明,反映了 API 从命令式到声明式的转变。
  5. 【回答框架 5】此外,createClass 已经在新版本 React 中被移除,官方建议使用 ES6 类或函数组件,理解差异有助于在维护旧代码与编写现代代码时做出正确选择。
  6. 【关键点 1】createClass 自动绑定方法,类组件需手动绑定或使用箭头函数。
  7. 【关键点 2】createClass 支持 mixins,类组件不支持,需用 HOC 或 hooks 替代。
  8. 【关键点 3】createClass 使用 getDefaultProps 定义默认 props,类组件用 static defaultProps。
  9. 【关键点 4】createClass 已被 React 16+ 废弃,类组件与函数组件是现行标准。
  10. 【易错点 1】不能认为类组件无法实现 mixins 功能,只是需要通过组合方式实现逻辑复用。
  11. 【易错点 2】在类组件中忘记绑定事件处理函数,会导致 this 为 undefined,这是常见运行时错误。
  12. 【易错点 3】不要混淆 createClass 的 getInitialState 与类组件的 constructor 中 this.state 赋值,前者是方法返回值,后者是实例属性。