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

جمعه ۲۴ اسفند ۱۳۹۷
بازدید ۱,۹۰۰ نفر
AmRo
(5 امتیاز از 1 رای)
Loading...

تصویر reactjs-higher-order-components_6197 کامپوننت های مرتبه بالا (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);

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);

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

تصویر react-higher-order-components-output_6197-min کامپوننت های مرتبه بالا (HOC) در ReactJS - آموزش ReactJS

نکته! کامپوننت های مرتبه بالا را می توان برای کاربرد های مختلف استفاده کرد. این توابع pure اساس برنامه نویسی تابعی را تشکیل می دهند. اگر از آن ها استفاده کنید، خواهید دید که توسعه و نگهداری برنامه چقدر راحت تر می شود.

ReactJS - نکات مفید ReactJS - انیمیشن ها (Animations)