React.createClass 和 extends Component 的区别(转载)

728 字

4 分钟

React.createClass 和 extends Component 的区别(转载)

2017-09-09

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

`React.createClass`和`extends Component`的区别主要在于：#

语法区别
propType 和 getDefaultProps
状态的区别
this区别
Mixins

1.语法区别#

React.createClass

1
import React from 'react';
2
const Contacts = React.createClass({
3
  render() {
4
    return (
5
      <div></div>
6
    );
7
  }
8
});
9
export default Contacts;

React.Component

1
import React from 'react';
2

3
class Contacts extends React.Component {
4
  constructor(props) {
5
    super(props);
6
  }
7
  render() {
8
    return (
9
      <div></div>
10
    );
11
  }
12
}
13

14
export default Contacts;

后一种方法使用ES6的语法，用constructor构造器来构造默认的属性和状态。

2.`propType`和`getDefaultProps`#

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

1
import React from 'react';
2

3
const Contacts = React.createClass({
4
  propTypes: {
5
    name: React.PropTypes.string
6
  },
7
  getDefaultProps() {
8
    return {
9

10
    };
11
  },
12
  render() {
13
    return (
14
      <div></div>
15
    );
16
  }
17
});
18

19
export default Contacts;

React.Component：通过设置两个属性propTypes和defaultProps

1
import React form 'react';
2
class TodoItem extends React.Component{
3
    static propTypes = { // as static property
4
        name: React.PropTypes.string
5
    };
6
    static defaultProps = { // as static property
7
        name: ''
8
    };
9
    constructor(props){
10
        super(props)
11
    }
12
    render(){
13
        return <div></div>
14
    }
15
}

3.状态的区别#

React.createClass：通过getInitialState()方法返回一个包含初始值的对象

1
import React from 'react';
2
   let TodoItem = React.createClass({
3
       // return an object
4
       getInitialState(){
5
           return {
6
               isEditing: false
7
           }
8
       }
9
       render(){
10
           return <div></div>
11
       }
12
   })

React.Component：通过constructor设置初始状态

1
import React from 'react';
2
  class TodoItem extends React.Component{
3
      constructor(props){
4
          super(props);
5
          this.state = { // define this.state in constructor
6
              isEditing: false
7
          }
8
      }
9
      render(){
10
          return <div></div>
11
      }
12
  }

4.this区别#

React.createClass：会正确绑定this

1
import React from 'react';
2

3
const Contacts = React.createClass({
4
  handleClick() {
5
    console.log(this); // React Component instance
6
  },
7
  render() {
8
    return (
9
      <div onClick={this.handleClick}></div>//会切换到正确的this上下文
10
    );
11
  }
12
});
13

14
export default Contacts;

React.Component：由于使用了 ES6，这里会有些微不同，属性并不会自动绑定到 React 类的实例上。

1
import React from 'react';
2
class TodoItem extends React.Component{
3
  constructor(props){
4
    super(props);
5
  }
6
  handleClick(){
7
    console.log(this); // null
8
  }
9
  handleFocus(){  // manually bind this
10
    console.log(this); // React Component Instance
11
  }
12
  handleBlur: ()=>{  // use arrow function
13
    console.log(this); // React Component Instance
14
  }
15
  render(){
16
    return <input onClick={this.handleClick}
17
      onFocus={this.handleFocus.bind(this)}
18
      onBlur={this.handleBlur}/>
19
  }
20
}

我们还可以在 constructor 中来改变 this.handleClick 执行的上下文，这应该是相对上面一种来说更好的办法，万一我们需要改变语法结构，这种方式完全不需要去改动 JSX 的部分：

1
import React from 'react';
2

3
class Contacts extends React.Component {
4
  constructor(props) {
5
    super(props);
6
    this.handleClick = this.handleClick.bind(this);
7
  }
8
  handleClick() {
9
    console.log(this); // React Component instance
10
  }
11
  render() {
12
    return (
13
      <div onClick={this.handleClick}></div>
14
    );
15
  }
16
}
17

18
export default Contacts;

5.`Mixins`#

如果我们使用 ES6 的方式来创建组件，那么 React mixins 的特性将不能被使用了。

1
React.createClass：使用 React.createClass 的话，我们可以在创建组件时添加一个叫做 mixins 的属性，并将可供混合的类的集合以数组的形式赋给 mixins。
2

3
import React from 'react';
4
let MyMixin = {
5
    doSomething(){}
6
}
7
let TodoItem = React.createClass({
8
    mixins: [MyMixin], // add mixin
9
    render(){
10
        return <div></div>
11
    }
12
})

原文链接https://segmentfault.com/a/1190000005863630

支持与分享

如果这篇文章对你有帮助，欢迎分享给更多人或打赏支持！

打赏

React.createClass 和 extends Component 的区别(转载)

https://gaodaxiu-blog.netlify.app/posts/React.createClass 和 extends Component 的区别(转载)/

作者

GaoDaXiu

发布于

2017-09-09

许可协议

CC BY-NC-SA 4.0

JavaScript中toStirng()与Object.prototype.toString.call()方法浅谈转载

模块化与组件化

音乐

音乐

`React.createClass`和`extends Component`的区别主要在于：#

1.语法区别#

2.`propType`和`getDefaultProps`#

3.状态的区别#

4.this区别#

5.`Mixins`#

支持与分享

音乐

React.createClass 和 extends Component 的区别(转载)

React.createClass和extends Component的区别主要在于：#

1.语法区别#

2.propType和getDefaultProps#

3.状态的区别#

4.this区别#

5.Mixins#

支持与分享

`React.createClass`和`extends Component`的区别主要在于：#

2.`propType`和`getDefaultProps`#

5.`Mixins`#