کامپوننت های مرتبه بالا (HOC) در ReactJS – آموزش ReactJS

کامپوننت های مرتبه بالا (HOC) در ReactJS

کامپوننت های مرتبه بالا (Higher Order Components) توابع جاوا اسکریپتی هستند که به منظور افزودن قابلیت های جدید به کامپوننت موجود استفاده می شوند. این توابع pure هستند، یعنی مقدار بازگشتی آن ها فقط به داده های ورودی بستگی دارد. اگر داده ها تغییر کنند، توابع مرتبه بالا دوباره با داده های ورودی متفاوت اجرا می شوند.

برای درک بهتر موضوع به مثال زیر توجه کنید. تابع 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);

اگر برنامه را اجرا کنید، خروجی زیر را مشاهده خواهید کرد:

نوشته کامپوننت های مرتبه بالا (HOC) در ReactJS – آموزش ReactJS اولین بار در سورس سرا - آموزش برنامه نویسی. پدیدار شد.