React: مكون Singleton React

يبدو هذا وكأنه سؤال استخدام ، وليس خطأ في قلب React. تتم الإجابة على أسئلة الاستخدام بشكل أفضل على مواقع مثل StackOverflow ، حيث نحاول استخدام مشكلات github لتتبع الأخطاء في React core. لهذا السبب ، سأغلق هذه المشكلة ، لكن لا تتردد في متابعة المحادثة هنا أو نقلها إلى StackOverflow.

فيما يتعلق بسؤالك ، فإن توصيتي الشخصية هي أن تتجنب الأفراد المنفردين.
http://stackoverflow.com/questions/137975/what-is-so-bad-about-singletons

شكرا على الرد.
هل توجد بالفعل طريقة لإنشاء مكونات React كأجزاء مفردة لست على علم بها؟ (أنا لا أثق في JSfiddle حتى يتم تقييمها من قبل أحدكم من كبار السن). إذا كان الأمر كذلك ، فيرجى مشاركته معي ، حيث لم أتمكن من العثور على أي شيء عنه في المستندات.

من صفحة مستند "التواصل بين المكونات" :

للتواصل بين مكونين ليس لهما علاقة بين الوالدين والطفل ، يمكنك إعداد نظام الأحداث العالمي الخاص بك.
...
نمط التدفق هو أحد الطرق الممكنة لترتيب ذلك.

كما ترون ، لم يتم ذكر الفردي. في رابط StackOverflow الذي قدمته ، قال الكثير من الأشخاص في الواقع إن استخدام الأحرف المفردة مفيد في بعض الحالات. من الجواب الثاني:

يحل الفرديون مشكلة واحدة (وواحدة فقط).
التنازع على الموارد.
إذا كان لديك بعض الموارد
(1) يمكن أن يكون له مثيل واحد فقط ، و
(2) تحتاج إلى إدارة هذا المثال الفردي ،
أنت بحاجة إلى مفردة.

يبدو هذا مثل حالة الاستخدام الخاصة بي (وعدد قليل جدًا في عالم React).

أعتقد أن هذا لا يزال ذا صلة كقضية على GitHub لأنه يبدو أنه طريقة ذات صلة لاستخدام المكونات ، وأعتقد أن المستندات يجب أن تحتوي على مرجع لها.

تحتوي مثيلات مكون React على حالة داخلية مطلوبة لمعرفة مكان وجود هذا المثيل داخل الشجرة. لا يمكنك عرض نفس المثيل في أماكن متعددة. لذلك فإن فكرة الأمثلة الفردية لا معنى لها في عالم React.

ما يظهر في هذا الكمان ليس حقًا ما يمكن أن أسميه مفردًا في الغالب بسبب حجة المثيل الفردي - إنه أشبه بوحدة مع حالتها الخاصة. ثم عندما يتم تقديم مثيل ، فإنه يستخدم الحالة المغلقة (ولكن "العالمية" بالفعل). إنه يخدع ويخزن إشارة إلى المثيل المثبت في حالته العالمية ويفرض تحديثًا على المثيل المثبت. الآن لا يوجد شيء يمنعك فعليًا من تقديم المزيد من هذه الأشياء ، مما قد يؤدي إلى عدم تحديث أول واحد. يمكنك بسهولة عمل شيء مشابه ودعم تقديم أكثر من 1.

أما بالنسبة لنا في الإشارة إلى هذا في مستنداتنا ، فلن نفعل ذلك. هناك الكثير من الأنماط التي يمكن تحقيقها باستخدام React لكننا لن نتحدث عنها جميعًا.

شكرا لأخذ الوقت الكافي للرد ، جيمس.
أولاً ، أفهم تمامًا نقاطك وأقدر حقيقة أنك ألقيت نظرة على JSfiddle. اسمحوا لي فقط أن أدلي ببيان نهائي.

1. ما قصدته كـ "مفرد" هو مثيل لمكون React يتم عرضه مرة واحدة فقط في جميع أنحاء التطبيق. كانت تلك نقطة البداية. لذلك ، فإن المشكلة التي ذكرتها بشأن المشكلة الأولى التي لم يتم تحديثها إذا كان عرض أكثر من 1 ليست ذات صلة.
2. أعلم أن "تلويث" مساحة الاسم العالمية أمر مستهجن ، ولكن مثل أي نهج ترميز ، له مكانه واستخداماته. يعد استخدام Flux لهذا النوع من الأشياء مشكلة لمجموعة متنوعة من الأسباب (لقد كافحت معها ليوم جيد أو نحو ذلك) وحتى الآن الحل الذي توصلت إليه ليس جيدًا (المكون "يختار" بين الدعائم أو متجر). يمكن أن يؤدي استخدام المفرد بالطريقة التي وصفتها إلى تسهيل ذلك كثيرًا . أعتقد أن الفوائد تفوق السلبيات.
3. كما تعلم ، فيما يتعلق بالمستندات. أستخدم React منذ حوالي شهرين وليس سراً أن المستندات تفتقر بشدة في بعض النقاط. بالنسبة لي ، كان تعلم استخدام React صعبًا ومربكًا.
   تحتوي المستندات حاليًا على 3 جمل حول الاتصال بين المكونات التي ليس لها علاقة "عائلية". أفهم أن تنوع الأنماط المتاحة لهذا النوع من الأشياء واضح بالنسبة لك ، لكنني واجهت Flux فقط حتى الآن.
   يعتمد المبتدئون بشكل كبير على المستندات ، وربما يكون سرد الأنماط الممكنة المتاحة لحل جميع أنواع المشاكل هو الشيء الدقيق الذي يجب عليك فعله. يمكننا أن نتعلم أنماطًا متعمقة بأنفسنا ، وتعلم ما هي الأداة المناسبة للمهمة هو الجزء الصعب.

أريد أن أجعل الأشياء التي كانت صعبة علي أسهل. أعتقد أن الأمر سيكون مجرد بضعة أسطر ويمكن أن يساعد المبتدئين في المستقبل.

دائمًا ما ينتهي بي الأمر بكتابة تعليقات ضخمة .. شكرًا على مواصلتي وقراءتي. :ابتسامة:

مرحبا @ all ،

أود إحياء هذه المحادثة بإضافة وجهة نظر أخرى. يتفاعل Wir البوابات . بالنسبة لحالة الاستخدام هذه ، أقوم بإنشاء مكونات مختلفة مثل الوسائط أو الإشعارات التي يجب تقديمها إلى مكون آخر معين يتم تحميله في App.jsx مثل هذا.

App.jsx

[...]
render() {
  return (<SingletonOverlay></SingletonOverlay>)
}
[...]

Notification.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import NotificationComponent from './Notification.js';
import SingletonOverlay from '../general/Overlay.js';

export default class Notification extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      element: null
    };
  }

  componentDidMount() {
    this.setState({ element: ReactDOM.findDOMNode(SingletonOverlay) });
  }

  render() {
    return this.state.element
      ? ReactDOM.createPortal(
        <NotificationComponent>That is a notification</NotificationComponent>,
        this.state.element,
      )
      : null;
  }
}

سيكون الخيار الآخر هو العثور على domNode بـ document.findElementById أو وظائف مشابهة وتمريرها إلى ReactDOM.findDOMNode ، مما يجعلني أشعر بعدم الارتياح لأنني مجبر على ترك "React-Cosmos".

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

jimfb هل يستحق هذا اقتراح ميزة؟