react容器组件_React：演示组件与容器组件

react容器组件

In React components are often divided into 2 big buckets: presentational components and container components.

在React中，组件通常分为2个大桶： 展示组件和容器组件 。

Each of those have their unique characteristics.

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

Presentational components are mostly concerned with generating some markup to be outputted.

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

They don’t manage any kind of state, except for state related to the presentation

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

Container components are mostly concerned with the “backend” operations.

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

They might handle the state of various sub-components. They might wrap several presentational components. They might interface with Redux.

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

As a way to simplify the distinction, we can say presentational components are concerned with the look, container components are concerned with making things work.

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

For example, this is a presentational component. It gets data from its props, and just focuses on showing an element:

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

const Users = props => (
  <ul>
    {props.users.map(user => (
      <li>{user}</li>
    ))}
  </ul>
)

On the other hand this is a container component. It manages and stores its own data, and uses the presentational component to display it.

另一方面，这是一个容器组件。 它管理和存储自己的数据，并使用演示组件进行显示。

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

翻译自: https://flaviocopes.com/react-presentational-vs-container-components/

react容器组件