عادةً ما نقوم بتقسيم مكونات رياكت إلى نوعين: المكونات الحاوية Container Components ومكونات العرض والتقديم Presentational Components، فما الفرق بينهما؟

مكونات العرض والتقديم (أو المكونات اﻷبناء) كما يبدو من اسمها، فهي تهتم  بما سيظهر من مخرجات على الشاشة، وغالبًا لا تحتوي على حالات states باستثناء تلك الحالات المتعلقة بعملية العرض.

أما المكونات الحاوية (أو المكونات اﻷباء) فغالبا ما تكون معنية بالتعامل مع اﻷنظمة خلف الكواليس (Back-end systems)، هذا يعني أنها كثيرًا ما تتعامل مع الحالات states وتمررها إلى المكونات الأبناء (مكونات العرض والتقديم).

الخلاصة أن الـ Presentational Components معنية بالعرض، أما الـ Container Components فمعنية بالمنطق وكيفية عمل اﻷشياء.

شاهد المثال التالي لتفهم الموضوع تماما..

فيما يلي المكون اﻷب UserContainer والذي يحوي على حالات، وهو يقوم بالاتصال مع الـ API ثم يمرر الحالة إلى ابنه:

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

يقوم الابن بالتقاط البيانات من اﻷب، ليقوم بعرضها:

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

[flaviocopes]