React三种创建组件的方式

React一共有三种创建方式：

（1）函数式定义的无状态组件

（2）es5原生方式React.createClass创建组件

（3）es6继承React.Component方式

无状态函数式组件

无状态函数式组件是一个只带有render方法的函数，并且该组件是无状态的，具体的形式如下：

function Hello(props) {
   return <div>Hello {props.name}</div>
 }
 ReactDOM.render(<Hello name="hello" />, node) ;

 无状态函数组件相对于其他两种的区别如下：

（1）由于是无状态组件，所以就没有实例化的过程，即不用分配多余的内存，从而性能会得到提升。

（2）无法访问组件的this对象，如this.ref、this.state都不能访问。

（3）组件无法访问生命周期的方法。

（4）无状态组件只能访问props。

React.createClass方式（16版本后已失效）

具体的表现形式如下面代码段：

var Es5Component = React.createClass({
    propTypes: {//定义传入props中的属性各种类型
        initialValue: React.PropTypes.string
    },
    defaultProps: { //组件默认的props对象
        initialValue: ''
    },
    // 初始化state
    getInitialState: function() {
        return {
            text: this.props.initialValue || 'test'
        };
    },
    handleChange: function(event) {
        this.setState({ 
            text: event.target.value
        });
    },
    render: function() {
        return (
            <div>
                Type something:
                <input onChange={this.handleChange} value={this.state.text} />
            </div>
        );
    }
});
Es5Component .propTypes = {
    initialValue: React.PropTypes.string
};
Es5Component .defaultProps = {
    initialValue: ''
};

 React.createClass是react刚开始推荐的创建组件的方式，与无状态组件相比，此方法创建的组件需要被实例化，并且可以访问生命周期。

继承React.Component方式

此方式是以es6方式创建React组件，具体实现方式如下代码段：

class Es6Component extends React.Component {
    constructor(props) {
        super(props);

        // 设置 initial state
        this.state = {
            text: props.initialValue || 'test'
        };

        // ES6 类中函数必须手动绑定
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) {
        this.setState({
            text: event.target.value
        });
    }

    render() {
        return (
            <div>
                Type something:
                <input onChange={this.handleChange}
               value={this.state.text} />
            </div>
        );
    }
}
Es6Component .propTypes = {
    initialValue: React.PropTypes.string
};
Es6Component .defaultProps = {
    initialValue: ''
};

通过此方式创建的组件同样可以访问生命周期函数、this属性 。同样也会被实例化，但是此方式与上边es5创建组件方法的区别在于es5会自动绑定this到组件上，但es6不会自动绑定，在此不再过多叙述，有兴趣的读者可以看我的另一篇文章‘React es6写法中this指向’ https://blog.csdn.net/qq_30104281/article/details/82663247