رد الفعل: العرض مقابل مكونات الحاوية

الفرق بين مكونات العرض ومكونات الحاوية في React

غالبًا ما يتم تقسيم مكونات React إلى دلاء كبيرتين:مكونات العرضومكونات الحاوية.

كل من هؤلاء له خصائصه الفريدة.

تهتم مكونات العرض في الغالب بإنشاء بعض العلامات المراد إخراجها.

إنهم لا يديرون أي نوع من الحالات ، باستثناء الحالة المتعلقة بالعرض التقديمي

تهتم مكونات الحاوية في الغالب بعمليات "الواجهة الخلفية".

قد يتعاملون مع حالة المكونات الفرعية المختلفة. قد يلفون عدة مكونات عرضية. قد تتفاعل معإعادة.

يمكننا القول كطريقة لتبسيط التمييزمكونات العرض تهتم بالمظهرومكونات الحاوية معنية بجعل الأشياء تعمل.

على سبيل المثال ، هذا عنصر عرضي. تحصل على البيانات من الدعائم الخاصة بها ، وتركز فقط على إظهار عنصر:

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

تحميل مجانيكتيب رد الفعل


المزيد من البرامج التعليمية للتفاعل: