العناصر العالية في ReactJS

المكونات العالية هي دوال جافا سكريبت تستخدم لإضافة ميزات إضافية إلى المكونات الموجودة. هذه الدوال هي دوال نظيفة، مما يعني أنها تأخذ بيانات وتعيد قيمًا بناءً على هذه البيانات. إذا تغيرت البيانات، فإن الدالة العالية ستقوم بإعادة تشغيل باستخدام إدخال بيانات مختلف. إذا أردنا تحديث المكون المُعدل، لا نحتاج إلى تعديل HOC. كل ما علينا القيام به هو تغيير البيانات التي يستخدمها دالة.

المكونات العالية (Higher Order Component،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.

ملاحظةيمكن استخدام العناصر العالية لأغراض مختلفة. هذه الفункциونات النقية هي جوهر برمجة الوظائف. بمجرد أن تعتادين عليها، ستلاحظين أن تطبيقك يصبح أكثر سهولة في الصيانة أو التحديث.