/

React: 展示型组件與容器型组件

React: 展示型组件與容器型组件

在React中，組件通常被分為兩大類：展示型組件和容器型組件。

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

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

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

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

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

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

它們可能與Redux進行交互。

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

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

1
2
3
4
5
6
7
const Users = props => (
 <ul>
 {props.users.map(user => (
 <li>{user}</li>
 ))}
 </ul>
)

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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} />
 }
}

tags: [“React”, “components”, “Presentational”, “Container”]