بخش های اصلی

آموزش ReactJS

ReactJS – کامپوننت های مرتبه بالاتر (Higher Order Components)

کامپوننت های مرتبه بالاتر، توابع جاوا اسکریپتی هستن که برای اضافه کردن ویژگی ها و عمکردهای اضافی به کامپوننت های موجود به کار میرن. این توابع، خالص هستن، به این معنی که داده را دریافت می کنن و بر اساس آن داده مقادیر را برمی گردانند. اگه داده تغییر کنه، توابع مرتبه بالاتر (HOC)، با داده های متفاوت ورودی، مجدد اجرا می شن. اگه بخوایم کامپوننت های بازگشتی را به روز رسانی کنیم، نیازی به تغییرِ HOC نیست. تمام کاری که باید انجام بدیم، تغییر داده ایِه که تابع از آن استفاده می کنه.

داده های مرتبه بالاتر (HOC)، کامپوننت های “normal” را احاطه می کنن و ورودی داده ی اضافی را ارائه می دن، درواقع HOC یک تابع است که یک کامپوننت را می گیره و کامپوننت دیگه ای که کامپوننت قبلی را احاطه می کنه را برمی گرداند.

در این آموزش از مثال ساده ای استفاده کرده ایم، بنابراین می توانید به سادگی طرز کارِ این مفهوم را درک کنین. تابعِ MyHOC، یک تابع مرتبه ی بالاترِه که فقط برای پاس دادنِ داده به MyComponent استفاده شده. این تابع، MyComponent را می گیره و آن را با newData ارتقاء می ده، سپس کامپوننت ارتقا یافته را که در صفحه نمایش، نشان داده خواهد شد، برمی گرداند.

import React from 'react';

var newData = {
   data: 'Data from HOC...',
}

var MyHOC = ComposedComponent ⇒ class extends React.Component {

   componentDidMount() {
      this.setState({
         data: newData.data
      });
   }

   render() {
      return <ComposedComponent {...this.props} {...this.state} />;
   }
};


class MyComponent extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.data}</h1>
         </div>
      )
   }
}

export default MyHOC(MyComponent);

اگه برنامه را اجرا کنیم، میبینیم که داده به MyComponent پاس داده شده.

react higher order components output

نکته

کامپوننت های مرتبه بالاتر، می توانند برای عملکردها و ویژگی های مختلفی استفاده بشن. این توابعِ pure، ذاتِ برنامه نویسیِ functional هستن. وقتی از این نوع کامپوننت ها استفاده کنین، متوجه میشین که چه قدر نگهداری یا ارتقای برنامه ساده تر خواهد شد.

مبحث آموزشی

آموزش ReactJS

Learn ReactJS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

تبلیغات

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد