react知识（一）React.createClass Vs React.Component

最新推荐文章于 2024-10-14 12:24:37 发布

原创最新推荐文章于 2024-10-14 12:24:37 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react

react 专栏收录该内容

8 篇文章

订阅专栏

本文对比了React中createClass与ES6 Class语法创建组件的区别。详细介绍了两种方式在方法定义、状态初始化及实例方法绑定等方面的差异，并提供了代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果是通过看react视频学习的同仁们会发现，有的视频是通过React.createClass来讲解sample 有的视频是用React.component来开发sample，那俩者之间有啥差别呢。
前面讲解的主要是环境搭建方面的，现在我们开始关注下React组件本身：
createClass是React以前版本的写法，现在Facebook官方逐渐废弃，所以尽量使用React.component来定义：

我们现在看下createClass的一个典型写法的例子：

import React,{Component} from 'react';

var ClickCount = React.createClass({
//初始化state
  getInitState: function () {
    return {count: 0}
  },
  //点击事件 将state里的count进行累加
  _handleClick: function () {
    this.setState(this.state.count + 1);
  },
  render: function () {

    return (
      <div>
        <h1>计数器：{this.state.count}</h1>
        <button onClick={this._handleClick}>点击计数</button>
      </div>
    )
  }
});
export default ClickCount;

如果改成ES6的写法：
差别一：ES6 Class 语法比起传统的对象字面量更为简洁。对于方法的定义不需要再使用 function 关键字，也不需要 , 来分开多个方法。
before

var ClickCount = React.createClass({
    render: function () {
        return ...;
    }
})

after

var ClickCount extends React.component{
     render(){
        return ...;
    }
}

差别二：将初始 state 定义移动到构造函数中
before:

var ClickCount = React.createClass({
    //初始化state
      getInitState: function () {
        return {count: 0}
      },
      ...
  })

after:

var ClickCount extends React.component{
    constructor(prop){
        super(prop);
        this.state={count:0};
    }
}

差别三：绑定实例方法和回调到实例上
比如前面例子中的 _handleClick 方法里的 this 将会指向当前这个组件实例。当使用 ES6 Class 语法的时候，我们必须要手动为这些方法绑定执行上下文
before:


var ClickCount = React.createClass({
    //初始化state
      ...
      //点击事件 将state里的count进行累加
      _handleClick: function () {
        console.log(this);
        console.log(this.state);
        this.setState(this.state.count + 1);
      },
        render: function () {
            return (
              <div>
                <h1>计数器：{this.state.count}</h1>
                <button onClick={this._handleClick}>点击计数</button>
              </div>
            )
          }
  }

点击按钮的时候会调用_handleClick方法，而且输出this与this.state都是可以的。我们来看下es6：

class ClickCounter extends Component{
  constructor(prop){
    super(prop);
    //先将这句话屏蔽掉 
    //this._handleClick=this._handleClick.bind(this);
    this.state={count:0};
  }
  _handleClick(){
  //输出null
    console.log(this);
    //报错误  state of null
    console.log(this.state)
    this.setState({count:this.state.count+1});
  }

  render(){
    return (
      <div>
        <button onClick={this._handleClick}>click Me</button>
        <h1>click Count{this.state.count}</h1>
      </div>
    )
  }
}

所以es6的写法需要在constructor【构造】函数里面，进行手动绑定this对象

this._handleClick=this._handleClick.bind(this);

如果存在多个事件需要绑定时，操作是比较繁琐的：
before：

class ExampleComponent extends React.Component {
  constructor() {
    super();
    this._handleClick = this._handleClick.bind(this);
    this._handleFoo = this._handleFoo.bind(this);
  }
  // ...
}

after:

class ExampleComponent extends React.Commponent{
    _bind(...methods){
                        methods.forEach((method)=>this[method]=this[method].bind(this));
    }
    constructor(){
        this._bind('_handleClick', '_handleFoo');
    }
}