اجزای با مرتبه بالاتر(Higher Order Components) در ReactJS

اجزای با مرتبه ی بالاتر(Higher Order Components) در ReactJS

این اجزا توابع جاوا اسکریپتی هستند که جهت افزودن قابلیت های بیشتر به اجزای موجود کاربرد دارند. این توابع خالص هستند، به این معنی که داده ها را دریافت می کنند و بر اساس این داده مقادیر را برگشت می دهند. اگر این داده تغییر کند، توابع با مرتبه ی بالاتر با ورودی داده ی مختلف مجددا اجرا می شوند. اگر بخواهیم جزء برگشتی خود را به روز رسانی کنیم، نیازی نیست که این اجزا را تغییر دهیم. تنها کاری که باید انجام دهیم این است که داده ای که تابع ما در حال استفاده از آن است را تغییر دهیم.
جزء با مرتبه ی بالاتر (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);

برای مطالعه سرفصل دوره آموزش عملی و کاربردی ReactJS کلیک نمایید .