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;