React新手求教：React.createClass与ES6类组件创建方式的区别

嗨，作为刚接触JavaScript和React的新手，能留意到这两种组件写法的差异，说明你观察得很仔细呀！这俩其实是React不同发展阶段的组件创建方案，核心区别主要有这么几点：

1. 语法标准与兼容性 #

• 方式一（React.createClass）：这是React早期基于ES5语法推出的API，现在已经被官方废弃了。如果你现在要使用它，得额外安装create-react-class这个第三方包才行。它的写法是用var声明变量，通过React提供的createClass方法来定义组件：

var RadioInput = React.createClass({ 
  render: function() {  
    // 组件渲染逻辑
    return <div>单选按钮组件</div>;
  } 
});
// 若要导出供其他文件使用，需手动添加：
// module.exports = RadioInput;

• 方式二（ES6类组件）：这是React 16之后官方推荐的主流写法，基于ES6的类语法，通过继承React.Component来创建组件，完全符合现代JavaScript的模块规范：

// 别忘了先引入React和Component
import React, { Component } from 'react';

export class RadioInput extends Component { 
  render(){ 
    return <div>单选按钮组件</div>;
  } 
}

2. this的绑定规则 #

这是新手最容易踩坑的点：

• 方式一中，React.createClass会自动绑定所有组件方法的this指向，你在组件里定义的任何方法，直接用this.方法名调用就行，不用手动处理绑定。
• 方式二中，ES6类组件不会自动绑定this，如果你在render里给事件绑定方法（比如onChange={this.handleChange}），必须手动绑定：
  • 方案一：在构造函数中bind

  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }
  

  • 方案二：使用箭头函数调用

  onChange={() => this.handleChange()}
  

  • 方案三：用类字段的箭头函数定义方法

  handleChange = () => {
    // 逻辑代码
  }
  

3. 状态初始化方式 #

• 方式一中，组件的初始状态需要通过getInitialState方法来返回：

var RadioInput = React.createClass({ 
  getInitialState: function() {
    return { checked: false };
  },
  render: function() {  
    // ...
  } 
});

• 方式二中，有两种初始化状态的方式：
  • 在构造函数中赋值this.state

  constructor(props) {
    super(props);
    this.state = { checked: false };
  }
  

  • 直接用类字段声明（更简洁，现在常用）

  class RadioInput extends Component {
    state = { checked: false };
    // ...
  }
  

4. 模块导出的便捷性 #

• 方式一属于CommonJS模块规范（Node.js早期的模块系统），如果要让组件能被其他文件import，得手动添加导出语句，比如module.exports = RadioInput;。
• 方式二直接用ES6的export关键字，属于ES模块规范，现在前端工程化（比如Webpack、Vite）默认支持这种方式，其他文件可以直接通过import { RadioInput } from './RadioInput'来引入，更便捷。

总结 #

现在开发React项目，优先选择方式二——它是官方推荐的标准写法，语法更贴近现代JS，生态支持也更完善；方式一已经过时，只有维护非常老旧的React项目时才会遇到。

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