展示组件与容器组件

在 react 中，组件分为两类：展示组件和容器组件。这些都有自己的特点。让我们详细看看这两个组件。
表示组件

• 主要关注事物的外观。
• 对应用程序的其余部分没有重大依赖。
• 与组件外部的数据规范无关。
• 主要通过 props 专门接收数据和回调。
• 考虑到它包含 DOM 标记和它们自己的样式这一事实，它可能同时包含表示组件和容器组件。

例子：
例如，下面的代码表示一个展示组件，它从 props 中获取数据，只专注于展示一个元素。

// presentational component
const Users = props => 
      (
   
         {props.users.map(user => 
            (
{itr}
    ))
         }
      
)

容器组件

• 主要关心事情是如何运作的。
• 可能同时包含展示组件和容器组件，但没有自己的 DOM 和标记。
• 向展示或其他容器组件提供数据和行为。
• 调用通量操作并将这些作为回调提供给展示组件。

// container component
classUsersContainerextendsReact.Component{constructor() 
   { 
    this.state = {   
       itr: []    
    }
  } 
 componentDidMount() {   
    axios.get('/users').then(itr=>this.setState({ users: itr}))    
    )  }
render() {
  return  
  }}

最后，我们可以简单地得出结论，表示组件与外观有关，容器组件与使事物正常工作有关。