React中createClass、extends Component的区别

文章类型:React

发布者:admin

发布时间:2023-04-09

一:语法区别,主要体现在方法的定义和静态属性的声明上

1:createClass =>采用构造函数,本质上是个工厂函数,方法定义使用逗号,隔开

2:extends=>采用类构造,ES6规范的class写法,义方法时务必谨记不要使用逗号隔开

二:propType 和 getDefaultProps

1:createClass =>通过proTypes对象和getDefaultProps()方法来设置和获取props.

2:extends=>通过设置两个属性propTypes和defaultProps

(三:状态的区别

1:createClass =>通过getInitialState()方法返回一个包含初始值的对象

2:extends=>通过constructor设置初始状态

四:this区别

1:createClass =>会正确绑定this

2:extends=>使用了 ES6,这里会有些微不同,属性并不会自动绑定到 React 类的实例上。

五:Mixins

1:createClass =>:可以在创建组件时添加一个叫做 mixins 的属性,并将可供混合的类的集合以数组的形式赋给 mixins。

2:extends=>如果使用 ES6 的方式来创建组件,那么 React mixins 的特性将不能被使用了。

React.createClass方式

import React from 'react';

const Contacts = React.createClass({
render() {
return (
<div></div>
);
}
});

export default Contacts;

React.Component方式

import React from 'react';

class Contacts extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div></div>
);
}
}

export default Contacts;