注意：在React中，组件的名字必须用大写字母开头，而包含该组件定义的文件名也应该是大写字母。
1、无状态组件
创建无状态函数式组件形式是从React 0.14版本开始出现的。它是为了创建纯展示组件，这种组件只负责根据传入的props来展示，不涉及到要state状态的操作。具体的无状态函数式组件，其官方指出：在大部分React代码中，大多数组件被写成无状态的组件，通过简单组合可以构建成其他的组件等；这种通过多个简单然后合并成一个大应用的设计模式被提倡。对于这种无状态的组件，使用函数式的方式声明，会使得代码的可读性更好，并能大大减少代码量，Arrow Function 则是函数式写法的最佳搭档：
import React from 'react';
import PropTypes from 'prop-types';
const Greeting = (props) => {
const style = {
fontWeight: "bold",
}
return <div style={style}>{props.name}</div>
}
Greeting.PropTypes = {
props: PropTypes.object.isRequired
}
ReactDOM.render(
<Greeting name="marlon" />,
document.getElementById('app')
)缺点：
1.无生命周期
一个组件就是一个函数，函数应该是谈不上生命周期的，但是组件却是有生命周期，stateless functions 没有生命周期。无状态组件一般会搭配高阶组件（简称：OHC）一起使用，高阶组件用来托管state，Redux框架就是通过store 管理数据源和所有状态，其中所有负责展示的组件都使用无状态函数式的写法。
2.没有 this
在 stateless functions 中，this 是 undefined，所以是不能使用 this 变量。
无状态组件只能访问输入的props，同样的props会得到同样的渲染结果，不会有副作用。
2、React.Component
React 升级到 v0.13 后就支持了 ES6 的class语法，我们可以使用class App extends React.Component{…}的方式创建组件，这也是目前官方推荐创建有状态组件的方式。
import React from 'react'
import { render } from 'react-dom'
class SwitchButton extends React.Component {
constructor(props) {
super(props)
this.state = {
open: this.props.open
}
this.handleClick = this.handleClick.bind(this)
}
handleClick(event) {
this.setState({ open: !this.state.open })
}
render() {
let open = this.state.open,
className = open ? 'switch-button open' : 'btn-switch'
return (
<label className={className} onClick={this.handleClick}>
<input type="checkbox" checked={open}/>
</label>
)
}
}
SwitchButton.defaultProps = {
open: false
}
ReactDOM.render(
<SwitchButton />,
document.getElementById('app')
)3、无状态组件 vs 有状态组件
无状态组件：无状态组件(Stateless Component)是最基础的组件形式，由于没有状态的影响所以就是纯静态展示的作用。一般来说，各种UI库里也是最开始会开发的组件类别。如按钮、标签、输入框等。它的基本组成结构就是属性（props）加上一个渲染函数（render）。由于不涉及到状态的更新，所以这种组件的复用性也最强。有状态组件：在无状态组件的基础上，如果组件内部包含状态（state）且状态随着事件或者外部的消息而发生改变的时候，这就构成了有状态组件（Stateful Component）。有状态组件通常会带有生命周期(lifecycle)，用以在不同的时刻触发状态的更新。这种组件也是通常在写业务逻辑中最经常使用到的，根据不同的业务场景组件的状态数量以及生命周期机制也不尽相同。
而在React中，我们通常通过props和state来处理两种类型的数据。props是只读的，只能由父组件设置。state在组件内定义，在组件的生命周期中可以更改。基本上，无状态组件（也称为哑组件）使用props来存储数据，而有状态组件（也称为智能组件）使用state来存储数据。