React：演示组件与容器组件

React中的Presentation和Container组件之间的区别

在React中，组件通常分为2个大桶：表现成分和容器组件。

这些中的每一个都有其独特的特征。

呈现组件主要与生成一些要输出的标记有关。

他们不管理任何状态，但与演示相关的状态除外

容器组件主要与“后端”操作有关。

它们可能处理各种子组件的状态。他们可能会包装几个演示组件。他们可能会与Redux。

作为简化区分的一种方式，我们可以说外观组件与外观有关，容器组件与使工作正常有关。

例如，这是一个表示性组件。它从道具中获取数据，只专注于显示元素：

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

免费下载我的反应手册

React：演示组件与容器组件

React中的Presentation和Container组件之间的区别

更多反应教程：