一文详细了解React.createClass和extends React.Component的区别

哈哈小鬼~FE

已于 2024-12-11 11:31:54 修改

阅读量590

点赞数 10

分类专栏： React 文章标签： react.js javascript 前端

于 2024-10-14 12:24:37 首次发布

本文链接：https://blog.csdn.net/qq_53911056/article/details/142909655

版权

React 专栏收录该内容

4 篇文章

订阅专栏

一、React.createClass

二、extends Component

三、React.createClass和extends React.Component的对比

1.语法区别

2.propTypes和getDefaultProps

3.state状态区别

4.this的区别

5.Mixins

前言：在React中，定义组件的两种方式分别是使用React.createClass方法和使用ES6的class语法通过extends React.Component(还有函数式定义组件)。两者都可以用来创建React组件，但它们有一些显著的区别。

友友们可以直接看第三部分

一、React.createClass

React.createClass是React早期版本中用来创建类组件的一种方法。它接受一个对象作为参数，该对象可以包含render方法、生命周期方法以及其他自定义方法。

总的语法，下面会详细说每部分区别。

import React from 'react';  
  
const MyComponent = React.createClass({  
  getDefaultProps() {  
    return {  
      initialCount: 0  
    };  
  },  
  
  getInitialState() {  
    return {  
      count: this.props.initialCount  
    };  
  },  
  
  increment() {  
    this.setState({count: this.state.count + 1});  
  },  
  
  render() {  
    return (  
      <div>  
        <p>{this.state.count}</p>  
        <button onClick={this.increment}>点击</button>  
      </div>  
    );  
  }  
});  
  
export default MyComponent;

getDefaultProps和getInitialState方法是用来定义组件的默认属性和初始状态的；

this.setState用于更新组件的状态；

自动绑定方法：在React.createClass中，所有方法默认自动绑定到实例上，所以不需要手动绑定（例如，不需要在render方法中写this.increment.bind(this)）。

二、extends React.Component

从React 0.13版本开始，引入了使用ES6的class语法来创建组件。这种方式更符合现代JavaScript的编程风格，也是当前推荐的方式。

总的语法，下面会详细说每部分区别。

import React, { Component } from 'react';  
  
class MyComponent extends Component {  
  constructor(props) {  
    super(props);  
    this.state = {  
      count: props.initialCount || 0  
    };  
  
    // 手动绑定方法  
    this.increment = this.increment.bind(this);  
  }  
  
  increment() {  
    this.setState({count: this.state.count + 1});  
  }  
  
  render() {  
    return (  
      <div>  
        <p>{this.state.count}</p>  
        <button onClick={this.increment}>点击</button>  
      </div>  
    );  
  }  
}  
  
// 设定默认属性  
MyComponent.defaultProps = {  
  initialCount: 0  
};  
  
export default MyComponent;

使用constructor来初始化状态（this.state）和绑定方法；

defaultProps是一个静态属性，需要在类外部定义，用来设置组件的默认属性；

需要手动绑定方法（除非使用箭头函数或类属性语法）。

三、React.createClass和extends React`.`Component的对比

1.语法区别

React.createClass使用的是对象字面量语法，而extends React.Component使用的是ES6的class语法。

React.createClass:

import React from 'react';
const MyComponent = React.createClass({
  render() {
    return (
      <div></div>
    );
  }
});
export default MyComponent;

extends React.Component:

import React from 'react';
class MyComponent extends React.Component {
  render() {
    return (
      <div></div>
    );
  }
}
export default MyComponent;

2.propTypes和getDefaultProps

propTypes 在两种组件定义方式中都是作为静态属性来定义的，但导入方式有所不同。在 React.createClass 中直接从 React 导入，而在 extends Component 中从 prop-types 包导入。

getDefaultProps 在 React.createClass 中是一个方法，在 extends Component 中则通过静态属性 defaultProps 来实现相同的功能。

React.createClass:

import React from 'react';
const MyComponent = React.createClass({
  propTypes: {
  },
  getDefaultProps() {
    return {
    };
  },
  render() {
    return (
      <div></div>
    );
  }
});
export default MyComponent;

extends React.Component:

import React from 'react';
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div></div>
    );
  }
}
MyComponent.propTypes = {
};
MyComponent.defaultProps = {
};
export default MyComponent;

3.state状态区别

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

extends React.Component:在使用 extends Component 时，可以在 constructor 中为 state 设置基于 props 的默认值。

React.createClass:

import React from 'react';
const MyComponent = React.createClass({
  getInitialState () {
    return {
    };
  },
  render() {
    return (
      <div></div>
    );
  }
});
export default MyComponent ;

extends React.Component:

MyComponent 
import React from 'react';
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }
  render() {
    return (
      <div></div>
    );
  }
}
export default MyComponent;

4.this的区别

在React.createClass中，方法默认绑定到实例上；在extends React.Component中，需要手动绑定方法（或者使用箭头函数自动绑定）。

React.createClass:

import React from 'react';
const MyComponent = React.createClass({
  handleClick() {
    console.log(this); //Component instance
  },
  render() {
    return (
      <div onClick={this.handleClick}></div>
    );
  }
});
export default MyComponent;

extends React.Component:

import React from 'react';
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  handleClick() {
    console.log(this); //null
  }
  render() {
    return (
      <div onClick={this.handleClick}></div>
    );
  }
}
export default MyComponent;

// 手动绑定上下文
import React from 'react';
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  handleClick() {
    console.log(this); //Component instance
  }
  render() {
    return (
      <div onClick={this.handleClick.bind(this)}></div>
    );
  }
}
export default MyComponent;

5.Mixins

在React中，Mixins是一种将可重用功能注入到组件中的方式。从React v16.x开始，Mixins已经被官方弃用。

React.createClass:

import React from 'react';
var SomeMixin = {
  doSomething() {
  }
};
const MyComponent = React.createClass({
  mixins: [SomeMixin],
  handleClick() {
    this.doSomething();//mixin
  },
  render() {
    return (
      <div onClick={this.handleClick}></div>
    );
  }
});
export default MyComponent;

extends React.Component:不支持React mixins。

若文章对你有帮助，点个赞吧！