React.createClass 与 extends Reac

我们一般会使用 React.createClass 方法来创建组件，基于 ES6 也可以通过 extends React.Component 来创建组件。

目录

• 创建组件
• propType 和 getDefaultProps
• State
• this的区别
• Mixins

React.createClass

import React from 'react';

const Example = React.createClass({
  render() {
    return (
      <div></div>
    );
  }
});

export default Example;

React.Component

把上面 React.createClass 定义的部分转换成 ES6 代码。

import React from 'react';

class Example extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div></div>
    );
  }
}

export default Example;

通常这些 ES6 代码需要使用类似 Babel 的工具转换为 ES5 代码之后才能在浏览器中正常执行。这里我们引入了一个叫 constructor的东西，因为我们需要在这里调用 super() 函数来为 React.Component 传递属性。

propType 和 getDefaultProps

使用、声明默认属性和类型，以及如何设置给类初始化状态。

在调用 React.createClass 时，添加 propTypes 的对象，给它的属性进行赋值来声明对应属性的类型。 getDefaultProps 这个函数返回了一个对象，这个对象的所有属性将会作为组件的初始化属性。

import React from 'react';

const Example = React.createClass({
  propTypes: {},
  getDefaultProps() {
    return {};
  },
  render() {
    return (
      <div></div>
    );
  }
});

export default Example;

React.Component ，我们通过给 Example 类添加一个名为 propTypes 属性的方式来达到和上面同样的效果。 getDefaultProps 函数也变成了一个名为 defaultProps 的属性。

import React from 'react';

class Example extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div></div>
    );
  }
}
Example.propTypes = {};
Example.defaultProps = {};

export default Example;

State

React.createClass

创建 getInitialState 的函数，返回一个包含初始化状态的对象。

import React from 'react';

const Example = React.createClass({
  getInitialState () {
    return {};
  },
  render() {
    return (
      <div></div>
    );
  }
});

export default Example;

React.Component

转换以后 getInitialState 函数被抛弃了，而是在 constructor 中像创建初始化属性一样声明了所有状态。

import React from 'react';

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <div></div>
    );
  }
}

export default Example;

this

使用 React.createClass 时 React 会自动帮我们处理函数中的 this 指针，但使用 ES6 的话 this 将会失效。

React.createClass

我们在 onClick 属性上绑定了 this.handleClick。当点击事件被触发时，React 会切换到正确的上下文中去执行 handleClick。

import React from 'react';

const Example = React.createClass({
  handleClick() {
    console.log(this); // React Component instance
  },
  render() {
    return (
      <div onClick={this.handleClick}></div>
    );
  }
});

export default Example;

React.Component

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

import React from 'react';

class Example extends React.Component {
  constructor(props) {
    super(props);
  }
  handleClick() {
    console.log(this); // null
  }
  render() {
    return (
      <div onClick={this.handleClick}></div>
    );
  }

我们可以像下面这样在行内代码中绑定正确的执行上下文：

import React from 'react';

class Example extends React.Component {
  constructor(props) {
    super(props);
  }
  handleClick() {
    console.log(this); // React Component instance
  }
  render() {
    return (
      <div onClick={this.handleClick.bind(this)}></div>// 方法一
      //<div onClick={::this.handleClick}></div> 方法二
      //<div onClick={() => {this.handleClick}()}></div> 方法三
    );
  }
}

export default Example;

除此之外，我们也可以在 constructor 中来改变 this.handleClick 执行的上下文。

import React from 'react';

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log(this); // React Component instance
  }
  render() {
    return (
      <div onClick={this.handleClick}></div>
    );
  }
}

export default Example;

Mixins

React.createClass

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

import React from 'react';

var SomeMixin = {
  doSomething() {

  }
};
const Example = React.createClass({
  mixins: [SomeMixin],
  handleClick() {
    this.doSomething(); // use mixin
  },
  render() {
    return (
      <div onClick={this.handleClick}></div>
    );
  }
});

export default Example;

React.Component

但在 ES6 中，mixins 特性不被支持。