在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} />
}
}