React 组件有很多种分类方式，常见的分类方式有函数组件和类组件，无状态组件和有状态组件，展示型组件和容器型组件。
函数组件和类组件
函数组件(Functional Component )和类组件(Class Component)，划分依据是根据组件的定义方式。函数组件使用函数定义组件，类组件使用ES6 class定义组件。下面是函数组件和类组件的简单示例：
// 函数组件
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// 类组件
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}函数组件的写法要比类组件简洁
类组件比函数组件功能更加强大
无状态组件和有状态组件
无状态组件(Stateless Component )和有状态组件(Stateful Component)，划分依据是根据组件内部是否维护state。无状态组件内部不使用state，只根据外部组件传入的props返回待渲染的React 元素。有状态组件内部使用state，维护自身状态的变化，有状态组件根据外部组件传入的props和自身的state，共同决定最终返回的React 元素。
函数组件一定是无状态组件
类组件则既可以充当无状态组件，也可以充当有状态组件
展示型组件和容器型组件
展示型组件(Presentational Component)和容器型组件(Container Component)，划分依据是根据组件的职责。
展示型组件一般是无状态组件，不需要state，因为展示型组件不需要管理数据
容器型组件一般是有状态组件，因为它们需要管理页面所需数据。
class UserListContainer extends React.Component{
constructor(props){
super(props);
this.state = {
users: []
}
}
componentDidMount() {
var that = this;
fetch('/path/to/user-api').then(function(response) {
response.json().then(function(data) {
that.setState({users: data})
});
});
}
render() {
return (
<UserList users={this.state.users} />
)
}
}
function UserList(props) {
return (
<div>
<ul className="user-list">
{props.users.map(function(user) {
return (
<li key={user.id}>
<span>{user.name}</span>
</li>
);
})}
</ul>
</div>
)
}上面的例子，UserListContainer是一个容器型组件，它获取用户列表数据，然后把用户列表数据传递给展示型组件UserList，由UserList负责UI的展现。
展示型组件和容器型组件是可以互相嵌套的，展示型组件的子组件既可以包含展示型组件，也可以包含容器型组件，容器型组件也是如此。
LGS
(๑＞ڡ＜)☆谢谢老板~
使用微信扫描二维码完成支付
