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

亦凉 2022-06-12 00:52 353阅读 0赞

如果是通过看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:

点击按钮的时候会调用\_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');
        }
    }