React组件可以被描述成JSON对象，这就意味着，开发者可以通过方法或类来构建组件。React组件基本上由三部分组成：属性props，状态state和生命周期方法。

React组件可以接受外部进入的参数，也可以维持自身状态，一旦收到参数导致变化或自身状态改变，React组件就会自动执行相应的生命周期方法，最后渲染。

React组件的构建方法

三种不同的方法：React.createClass、ES6 classes、无状态函数。

1、React.createClass：最传统，兼容性最好。

@H_403_11@const Button = React.createClass({ getDefaultProps() { return { color: 'blue',text: 'Confirm',}; },render() { const { color,text } = this.props; return ( <button className={`btn btn-${color}`}> <em>{text}</em> </button> ); } });

2、ES6 classes：通过ES6标准的类语法

@H_403_11@import React,{ Component } from 'react'; class Button extends Component { constructor(props) { super(props); } static defaultProps = { color: 'blue',text: 'Confirm',6 }; render() { const { color,text } = this.props; return ( <button className={`btn btn-${color}`}> <em>{text}</em> </button> ); } }

React不推荐采用继承，因为如果采用了继承，UI层面小的修改就可能影响整体，这样并不是我们需要的。React采用的是组合逻辑：将组件拆分到合理的利用，用组合的方式合成业务组件。

3、无状态函数：采用这种方式构建的组件称为无状态组件

@H_403_11@function Button({ color = 'blue',text = 'Confirm' }) { return ( <button className={`btn btn-${color}`}> <em>{text}</em> </button> ); }

无状态组件不存在state，也没有生命周期方法。 在合适的情况下，我们都应该使用无状态组件，因为它不像上面两种方法在调用时会创建新实例，它创建时始终保持了一个实例，避免了不必要的检查和内存分配。