React.createClass和etends Component的区别
createClass本质上是一个工厂函数，extends的方式更加接近最新的ES6规范的class写法。两种方式在语法上的差别主要体现在方法的定义和静态属性的声明上。createClass方式的方法定义使用逗号,隔开，因为creatClass本质上是一个函数，传递给它的是一个Object；而class的方式定义方法时务必谨记不要使用逗号隔开，这是ES6 class的语法规范。
React.createClass和extends Component的区别主要在于：
语法区别
propType 和 getDefaultProps
状态的区别
this区别
Mixins
语法区别
React.createClass
import React from 'react';
const Contacts = React.createClass({
render() {
return (
);}
});
export default Contacts;
React.Component
import React from 'react';
class Contacts extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
);}
}
export default Contacts;
后一种方法使用ES6的语法，用constructor构造器来构造默认的属性和状态。
propType 和 getDefaultProps
React.createClass：通过proTypes对象和getDefaultProps()方法来设置和获取props.
import React from 'react';
const Contacts = React.createClass({
propTypes: {
name: React.PropTypes.string
},
getDefaultProps() {
return {
};},
render() {
return (
);}
});
export default Contacts;
React.Component：通过设置两个属性propTypes和defaultProps
import React form 'react';
class TodoItem extends React.Component{
static propTypes = { // as static property
name: React.PropTypes.string
};
static defaultProps = { // as static property
name: ''
};
constructor(props){
super(props)
}
render(){
return
}
}
状态的区别
React.createClass：通过getInitialState()方法返回一个包含初始值的对象
import React from 'react';
let TodoItem = React.createClass({
// return an object
getInitialState(){
return {
isEditing: false
}
}
render(){
return
}
})
React.Component：通过constructor设置初始状态
import React from 'react';
class TodoItem extends React.Component{
constructor(props){
super(props);
this.state = { // define this.state in constructor
isEditing: false
}
}
render(){
return
}
}
this区别
React.createClass：会正确绑定this
import React from 'react';
const Contacts = React.createClass({
handleClick() {
console.log(this); // React Component instance
},
render() {
return (
//会切换到正确的this上下文
);
}
});
export default Contacts;
React.Component：由于使用了 ES6，这里会有些微不同，属性并不会自动绑定到 React 类的实例上。
import React from 'react';
class TodoItem extends React.Component{
constructor(props){
super(props);
}
handleClick(){
console.log(this); // null
}
handleFocus(){ // manually bind this
console.log(this); // React Component Instance
}
handleBlur: ()=>{ // use arrow function
console.log(this); // React Component Instance
}
render(){
return
}
}
我们还可以在 constructor 中来改变 this.handleClick 执行的上下文，这应该是相对上面一种来说更好的办法，万一我们需要改变语法结构，这种方式完全不需要去改动 JSX 的部分：
import React from 'react';
class Contacts extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log(this); // React Component instance
}
render() {
return (
);}
}
export default Contacts;
Mixins
如果我们使用 ES6 的方式来创建组件，那么 React mixins 的特性将不能被使用了。
React.createClass：使用 React.createClass 的话，我们可以在创建组件时添加一个叫做 mixins 的属性，并将可供混合的类的集合以数组的形式赋给 mixins。
import React from 'react';
let MyMixin = {
doSomething(){}
}
let TodoItem = React.createClass({
mixins: [MyMixin], // add mixin
render(){
return
}
})
参考文章1
参考文章2
参考文章3
关键字：JavaScript, react.js, React, component
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
