在React中,組件通常被分為兩大類:展示型組件容器型組件

每個組件都具有其獨特的特性。

展示型組件主要關注生成要輸出的標記。

它們不管理任何類型的狀態,除非與展示相關的狀態。

容器型組件主要關注“後端”操作。

它們可能處理各種子組件的狀態。

它們可能包裝幾個展示型組件。

它們可能與Redux進行交互。

為了簡化區分,我們可以說展示型組件關注外觀,容器型組件關注使事情運作

例如,這是一個展示型組件。它從其props中獲取數據,並僅關注顯示元素:

const Users = props => (
 <ul>
 {props.users.map(user => (
 <li>{user}</li>
 ))}
 </ul>
)

另一方面,這是一個容器型組件。它管理並存儲自己的數據,並使用展示型組件來顯示它:

class UsersContainer extends React.Component {
 constructor() {
 this.state = {
 users: []
 }
 }

 componentDidMount() {
 axios.get('/users').then(users =>
 this.setState({ users: users }))
 )
 }

 render() {
 return <Users users={this.state.users} />
 }
}