React.createClass vs extends Component

在 React 开发中，我们构建用户界面的方式经历了一些演变。你可能见过两种创建组件的方式：React.createClass 和 class ... extends React.Component。它们都能创建组件，但背后有一些关键的区别，了解这些区别可以帮助你写出更现代、更易维护的 React 代码。

React.createClass 是 React 早期版本中创建组件的主要方式。它本质上是一个工厂函数，你传入一个包含组件方法和属性的对象，它返回一个 React 组件类。

var MyComponent = React.createClass({
  render: function() {
    return <div>Hello from createClass!</div>;
  }
});

这种方式简单直接，但它有一些局限性。最主要的一点是，它不支持 ES6 class 的一些特性，比如生命周期方法的更简洁的写法。

随着 ES6 的普及，React 引入了 class ... extends React.Component 这种更符合现代 JavaScript 语法的方式来创建组件。

class MyComponent extends React.Component {
  render() {
    return <div>Hello from ES6 class!</div>;
  }
}

这种方式利用了 class 的继承机制，使得组件的结构更加清晰，也更容易理解。更重要的是，它完整支持 React 的生命周期方法，让你可以更精细地控制组件的行为。

那么，我们该如何选择呢？

答案很简单：在新的项目中，始终应该使用 class ... extends React.Component 。

React.createClass 已经被官方标记为“legacy”（遗留），这意味着它未来可能会被移除。使用 ES6 class 的方式更符合 React 的发展方向，也更容易与其他现代 JavaScript 库和工具集成。

当然，如果你维护的是一个老项目，并且项目中大量使用了 React.createClass，也不必急于全部替换。可以逐步地将新的组件使用 ES6 class 的方式编写，并在有时间的时候考虑重构旧的组件。

下面，我们通过一些常见问题来进一步巩固对这两种方式的理解：

常见问题解答

1. React.createClass 和 extends Component 在性能上有什么区别吗？

基本上没有显著区别。两种方式创建的组件在 React 内部都会被转换成类似的结构，性能差异可以忽略不计。

2. React.createClass 中如何处理 this 的绑定？

React.createClass 会自动帮你绑定组件方法中的 this，所以你不需要手动绑定。而 extends Component 中，你需要手动绑定 this，或者使用箭头函数。

3. 如果我需要用到 mixins，应该选择哪种方式？

Mixins 是一种在 React 组件之间共享代码的旧方法，它已经被官方弃用。如果你仍然在使用 mixins，那么你可能需要继续使用 React.createClass，因为它不支持 mixins。但是，更推荐的方式是使用高阶组件或者 render props 来替代 mixins。

4. React.createClass 中的 getInitialState 方法在 extends Component 中对应什么？

在 extends Component 中，你可以在 constructor 中初始化组件的状态：

constructor(props) {
  super(props);
  this.state = { count: 0 };
}

5. 我可以在 React.createClass 中使用箭头函数吗？

可以，但是需要注意的是，箭头函数会改变 this 的指向。如果你在箭头函数中需要访问组件的 this，你需要手动绑定它，或者使用 React.createClass 自动绑定的特性。

希望这篇文章能够帮助你更好地理解 React.createClass 和 extends Component 之间的区别，并选择合适的方式来创建你的 React 组件。记住，拥抱新的技术，才能让你的代码更加现代化和易于维护。