8. React.createClass 和 extends Component 的区别有哪些？

8. React.createClass 和 extends Component 的区别有哪些？

主要区别

语法区别

• createClass 本质上是一个工厂函数, extends 的方式更加接近最新的 ES6 规范的 class 写法。两种方式在语法上的差别主要体现在方法的定义和静态属性的声明上
• createClass 方式的方法定义使用逗号, 隔开, 因为 creatClass 本质上是一个函数, 传递给它的是一个 Object; 而 class 的方式定义方法时务必谨记不要使用逗号隔开, 这是 ES6 class 的语法规范

propType 和 getDefaultProps

• React.createClass: 通过 proTypes 对象和 getDefaultProps() 方法来设置和获取 props
• React.Component: 通过设置两个属性 propTypes 和 defaultProps

状态的区别

• React.createClass: 通过 getInitialState() 方法返回一个包含初始值的对象
• React.Component: 通过 constructor 设置初始状态

this区别

• React.createClass: 会正确绑定 this
• React.Component: 由于使用了 ES6, 这里会有些微不同, 属性并不会自动绑定到 React 类的实例上

Mixins

• React.createClass: 使用 React.createClass 的话, 可以在创建组件时添加一个叫做 mixins 的属性, 并将可供混合的类的集合以数组的形式赋给 mixins
• 如果使用 ES6 的方式来创建组件, 那么 React mixins 的特性将不能被使用了