الفرق بين المراجعتين ل"React/web components"
جميل-بيلوني (نقاش | مساهمات) ط (تحديث الصفحة، والعنوان، والتصنيفات) |
|||
سطر 1: | سطر 1: | ||
− | <noinclude>{{DISPLAYTITLE:مكونات الويب}}</noinclude> | + | <noinclude>{{DISPLAYTITLE:مكونات الويب في React}}</noinclude> |
إنّ مكوّنات React و[https://developer.mozilla.org/en-US/docs/Web/Web_Components مكوّنات الويب] مبنية لحل مشاكل مختلفة. حيث تُزوِّدنا مكوّنات الويب بتغليف قوي لمكوّنات قابلة لإعادة الاستخدام، بينما تُزوِّدنا مكوّنات React بمكتبة تصريحات تُبقي DOM على تزامن مع بياناتنا. يكون هذا الهدفان متكاملين، وكمُطوّر لك حرية استخدام React في مكوّنات الويب لديك، أو استخدام مكوّنات الويب في React أو كليهما معًا. | إنّ مكوّنات React و[https://developer.mozilla.org/en-US/docs/Web/Web_Components مكوّنات الويب] مبنية لحل مشاكل مختلفة. حيث تُزوِّدنا مكوّنات الويب بتغليف قوي لمكوّنات قابلة لإعادة الاستخدام، بينما تُزوِّدنا مكوّنات React بمكتبة تصريحات تُبقي DOM على تزامن مع بياناتنا. يكون هذا الهدفان متكاملين، وكمُطوّر لك حرية استخدام React في مكوّنات الويب لديك، أو استخدام مكوّنات الويب في React أو كليهما معًا. | ||
سطر 55: | سطر 55: | ||
* [[React/portals|المداخل (Portals) في React]] | * [[React/portals|المداخل (Portals) في React]] | ||
* [[React/error boundaries|حدود الأخطاء]] | * [[React/error boundaries|حدود الأخطاء]] | ||
− | |||
* [[React/higher order components|المكونات ذات الترتيب الأعلى]] | * [[React/higher order components|المكونات ذات الترتيب الأعلى]] | ||
* [[React/forwarding refs|تمرير المراجع]] | * [[React/forwarding refs|تمرير المراجع]] | ||
سطر 67: | سطر 66: | ||
*[https://reactjs.org/docs/web-components.html صفحة مكونات الويب في توثيق React الرسمي]. | *[https://reactjs.org/docs/web-components.html صفحة مكونات الويب في توثيق React الرسمي]. | ||
[[تصنيف:React]] | [[تصنيف:React]] | ||
+ | [[تصنيف:React Advanced Guides]] |
المراجعة الحالية بتاريخ 13:27، 23 فبراير 2019
إنّ مكوّنات React ومكوّنات الويب مبنية لحل مشاكل مختلفة. حيث تُزوِّدنا مكوّنات الويب بتغليف قوي لمكوّنات قابلة لإعادة الاستخدام، بينما تُزوِّدنا مكوّنات React بمكتبة تصريحات تُبقي DOM على تزامن مع بياناتنا. يكون هذا الهدفان متكاملين، وكمُطوّر لك حرية استخدام React في مكوّنات الويب لديك، أو استخدام مكوّنات الويب في React أو كليهما معًا.
معظم من يستخدم React لا يستخدم مكوّنات الويب، ولكن قد ترغب في ذلك خاصة إذا كنت تستخدم مكوّنات لواجهة المستخدم من طرف ثالث والتي تكون مكتوبة باستخدام مكوّنات الويب.
استخدام مكوّنات الويب في React
class HelloMessage extends React.Component {
render() {
return <div>أهلًا <x-search>{this.props.name}</x-search>!</div>;
}
}
ملاحظة: تعرض مكوّنات الويب عادة واجهة برمجة تطبيقات (API) إلزاميّة. على سبيل المثال قد يُعرِّض مكوّن الويب video
الدالتين play()
و pause()
، وللوصول إلى واجهة برمجة التطبيقات الإلزامية لمكوّنات الويب ستحتاج إلى استخدام مرجع للتفاعل مع عقدة DOM مباشرةً. إن كنت تستخدم مكوّنات ويب من طرف ثالث فالحل الأمثل هو كتابة مكوّن React يسلك سلوك غلاف لمكوّنات الويب لديك.
الأحداث الصادرة من قبل مكوّن الويب قد لا تنتشر بشكل صحيح عبر شجرة تصيير React. ستحتاج إلى إرفاق معالج أحداث يدويًّا للتعامل مع هذه الأحداث ضمن مكوّنات React لديك.
إحدى الأمور التي من الشائع الخطأ بها هي استخدام مكوّنات الويب للخاصيّة class
بدلًا من className
:
function BrickFlipbox() {
return (
<brick-flipbox class="demo">
<div>الواجهة الأمامية</div>
<div>الواجهة الخلفية</div>
</brick-flipbox>
);
}
استخدام React في مكوّنات الويب لديك
class XSearch extends HTMLElement {
connectedCallback() {
const mountPoint = document.createElement('span');
this.attachShadow({ mode: 'open' }).appendChild(mountPoint);
const name = this.getAttribute('name');
const url = 'https://www.google.com/search?q=' + encodeURIComponent(name);
ReactDOM.render(<a href={url}>{name}</a>, mountPoint);
}
}
customElements.define('x-search', XSearch);
ملاحظة: لن تعمل هذه الشيفرة إن نقلت الأصناف باستخدام Babel. انظر إلى هذه المشكلة من هنا. يجب عليك تضمين custom-elements-es5-adapter
قبل تحميل مكوّنات الويب لإصلاح هذه المشكلة.
انظر أيضًا
- شرح JSX بالتفصيل
- التحقق من الأنواع الثابتة
- التحقق من الأنواع باستخدام PropTypes
- استخدام المراجع مع DOM
- المكونات غير المضبوطة
- تحسين الأداء
- React بدون ES6
- React بدون JSX
- المطابقة (Reconciliation)
- استخدام السياق (Context) في React
- استخدام الأجزاء (Fragments) في React
- المداخل (Portals) في React
- حدود الأخطاء
- المكونات ذات الترتيب الأعلى
- تمرير المراجع
- خاصيات التصيير
- تكامل React مع المكتبات الأخرى
- سهولة الوصول
- تقسيم الشيفرة
- الوضع الصارم (Strict Mode)