Presentational

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