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

免费下载我的反应手册


更多反应教程: