React常見的組件分類方式：
1.函數組件，類組件
2.無狀態組件，有狀態組件
3.展示型組件和容器型組件
函數組件和類組件
函數組件(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>;
}
}上面兩種寫法等價，但函數的寫法比類組件簡潔，不過類組件比函數組件功能更強大。類組件可以維護自身的狀態變量，即組件的state,類組件還有不同的生命週期方法，可以讓開發者在組建不同的生命週期階段對組件做出更多的控制(掛載，更新，卸載)
相比於類組件，函數組件更加註重專注和單一，承擔的職責也更加明確。它只返回React元素的函數，只關注對UI的展現。函數組件接收外部傳入的props，返回對應UI的DOM描述。
無狀態組件和有狀態組件
無狀態組件(Stateless)和有狀態組件(Stateful Component),劃分依據是根據組件內部是否維護state。無狀態組漸內部不使用state,只根據外部組件傳入的props返回待渲染的React元素。有狀態組件內部使用state,維護自身狀態變化，有狀態組件根據外部組件傳入的props和自身的state,共同決定最終返回的React元素。
函數組件一定是無狀態組件，看類組件則既可以充當無狀態組件，也可以充當有狀態組件。當一個組件不需要管理自身狀態時，也就是無狀態組件，應該優先設計爲函數組件。
展示型組件和容器型組件
展示型組件(Presentational Component)和容器型組件(Container Component),劃分的依據是組件的職責。
展示型組件的職責：
組件UI的展現。展示型組件不關心組件使用的數據是如何獲取的，以及組件數據應該如何修改，它只需要知道有了這些數據，組件UI的展現。外部組件通過props傳遞給展示型組件所需要的數據和修改這些數據的回調函數，展示型組件只是它們的使用者。展示型組件一般是無狀態組件，不需要state,因爲展示型組件不需要管理數據，但當展示型組件需要管理自身UI狀態時，例如控制組件內部彈窗的顯示與隱藏，是可以使用state的，這是state屬於UI state。大部分展示型組件不需要使用state,應該優先考慮使用函數組件實現展示型組件。
容器型組件的職責是：組件數據如何工作。容器型組件需要知道如何獲取子組件所需要的數據，以及處理這些數據的處理邏輯，並把數據和邏輯通過props提供給子組件使用。容器組件一般是有狀態的組件，因爲他們需要管理頁面所需要數據。
下面的例子中，UserListContainer是一個容器型組件，它獲取用戶列表數據，然後把用戶列表數據傳遞給展示型組件UserList，由UserList富足UI展現。
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(users){
return (
<li key={user.id}>
<span>{user.name}</span>
</li>
)
})}
</ul>
</div>
)
}
展示型組件和容器型組件是可以互相嵌套的，展示型組件的子組件可以包含展示型組件也可以包含容器型組件，容器組件也是如此，
