Ant-design: قائمة طويلة الأمثل

بعد قراءة المقالة والتحدث أخيرًا عن Reactabular ، فإن تأثير المحاكاة الافتراضية الذي ينفذه جيد حقًا ، لكنني لا أشعر أن هذا الجدول مطلوب في الوقت الحالي ، لأنه توجد الآن مشكلات في الأداء عندما لا يكون هناك الكثير من البيانات ، ويوصى بالترحيل عندما يكون هناك الكثير من البيانات. حق.

اتضح أن رد الفعل البطيء يعرض أيضًا div للمكونات غير الموجودة في منفذ العرض لملء الارتفاع بحيث يمكن عرض شريط التمرير بشكل صحيح. هذا هو تنفيذ Reactabular و response-virtualized.

يجسد Reactabular علامة tr أعلى وأسفل ، ثم يضبط الارتفاع على ارتفاع الصف غير المعروض.

رد الفعل الافتراضي هو وضع div خارج القائمة ، ودعم الارتفاع ، ثم ضبط موضع العناصر ليتم عرضها من خلال position: absolute; top: 36700px; .

يحتاج كل من التفاعل الافتراضي والتفاعل اللانهائي إلى إعطاء ارتفاع كل عنصر ، والذي يبدو وكأنه قيد.

تحت فرضية أنه يمكن تحديد ارتفاع الصف لكل عنصر ، فإن عرض الجدول المستند إلى حزمة رد الفعل اللانهائية ليس سيئًا.

لا تلصق عنوان الإنترانت. . .

يحتاج كل من التفاعل الافتراضي والتفاعل اللانهائي إلى إعطاء ارتفاع كل عنصر ، والذي يبدو وكأنه قيد.

ماذا عن minItemHeight أو minRowHeight . وفقًا لي ، إذا عرفنا الحد الأدنى لارتفاع جميع الصفوف ، فسيكون ذلك كافيًا لـ react-virtualized و react-infinite

نعم ， سيعمل كلا من height و minHeight

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

@ wangtao0101 لا تكتب وثيقة؟

benjycui الإخوة ، لم يتح لي الوقت للكتابة بعد.

وثيقة benjycui موافق

لا يمكنني قراءة معظم هذا الموضوع ، لذا أعتذر إذا لم يكن ذلك مناسبًا ، لكنني اعتقدت أنني سأشارك النهج الذي اتبعناه مع التمرير الافتراضي في Jaeger UI. إنها ليست معممة ، في هذه المرحلة ، لكنها قد لا تزال تستحق الاهتمام.

jaegertracing / jaeger-ui - src / المكونات / TracePage / TraceTimelineViewer / ListView / index.js

لا يلزم أن تكون العناصر ذات ارتفاعات ثابتة (ربما تكون مشابهة لقائمة التفاعل بأي ارتفاع ):

src / element / TracePage / TraceTimelineViewer / ListView / index.js # L321، L373

بعض الملاحظات من العلاقات العامة :

بدأت مع تفاعل ظاهري ، ولكن المشكلات حول ومضات المناطق غير المعروضة أثناء التمرير والحجم الديناميكي / تغيير المحتوى بشكل دوري يؤدي إلى إحياء المشروع القديم الذي يقوم بنفس الشيء بشكل أساسي: src/components/TracePage/TraceTimelineViewer/ListView/* .

ListView أكثر ملاءمة لاحتياجاتنا (وأقل تنوعًا). تشمل هذه التحسينات:

• اتباع نهج التقديم في كثير من الأحيان وكميات أكبر من العناصر لكل عرض
• تحسين للتمرير في كلا الاتجاهين بدلاً من اتجاه التمرير الحالي فقط
• وجود مفهوم "الفحص الزائد" الأدنى والمنتظم ، مما يعني أنه إذا كانت قائمة العناصر المعروضة حاليًا تلبي الحد الأدنى من المخزن المؤقت ، فلا يتم عرض المزيد ، ولكن إذا لم يكن الأمر كذلك ، فقم بتقديم ما يكفي لتلبية الحد الأدنى من المخزن المؤقت وبعض العناصر الإضافية ، حسنا

أيضا ، عمل ممتاز على تصميم النمل! إنه لمن دواعي سروري العمل مع: +1:

هل هناك أي إصدار مخطط لإضافته؟

لقد قابلت نفس المشكلة. هل هناك تقدم؟

تواجه نفس المشكلة.

هل هناك أي تقدم في هذا؟

SeanCraftsman ، nunohora ، aindong - باستخدام رد الفعل الافتراضي حل المشكلة ، بالنسبة لي ، والموضح هنا في المستندات.

tiffon سيعمل هذا مع قائمة ولكن لا يمكنني معرفة كيفية القيام بذلك للجدول.

مرحبًا ، ما هي أفضل طريقة لاستخدام TreeSelect مع رد الفعل الافتراضي؟

هل هناك أي تقدم في هذا؟ هل من الممكن الجمع بين التفاعل الافتراضي مع جدول Antd؟

يحتاج كل من التفاعل الافتراضي والتفاعل اللانهائي إلى إعطاء ارتفاع كل عنصر ، والذي يبدو وكأنه قيد.
على أساس أنه يمكن تحديد ارتفاع الصف لكل عنصر ، فإن عرض الجدول المستند إلى حزمة رد الفعل اللانهائية ليس سيئًا.

paranoidjkbenjycui فقط لمعلوماتك ، تعمل ميزة التفاعل الافتراضي أيضًا مع صفوف ذات ارتفاع غير معروف يحجم العناصر أثناء الطيران: https://github.com/bvaughn/react-virtualized/blob/master/docs/AutoSizer.md

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

لمعلوماتك ، أعتقد أن نافذة رد الفعل هي الجيل التالي من التفاعل الافتراضي.

https://github.com/bvaughn/react-window

في الخميس ، 5 يوليو 2018 ، الساعة 4:01 صباحًا ، جوناثان دومين ، إخطارات github.com
كتب:

وأيضًا ، أفكاري في هذا: قد لا يكون من الضروري التكرار
الافتراضية داخل antd. ربما بدلاً من ذلك فضح طريقة العرض التي
هو المسؤول عن توفير صفوف القائمة / الجدول بحيث يمكن للمستخدم تنفيذها
ستكون المحاكاة الافتراضية بحد ذاتها بداية جيدة.

-
أنت تتلقى هذا لأنه تم ذكرك.
قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على GitHub
https://github.com/ant-design/ant-design/issues/3789#issuecomment-402638593 ،
أو كتم الخيط
https://github.com/notifications/unsubscribe-auth/ACMpUchXXaG0moutACfeWCLTQTZqoadnks5uDcfdgaJpZM4KueVV
.

إذن ، هل هناك مشكلة مماثلة؟ 😳

إنه أيضًا بطيء حقًا مع مكون النقل

ما هو الحل الحالي لاستخدام جدول antd مع رد الفعل الافتراضي ؟
ليس لدي أي فكرة عن عرض جدول antd مع جدول ظاهري للتفاعل بينما يمكن استخدام قائمة التفاعل الافتراضية مع قائمة antd باستخدام دعائم rowRenderer.
أو مجرد استخدام الجدول الافتراضي التفاعلي مع أنماط مخصصة دون استخدام جدول antd؟

أي تحديث على هذا؟

لا تزال مشكلة الأداء واضحة ، وآمل أن يتم حلها في أسرع وقت ممكن!

سأكون مهتمًا بإنشاء علاقات عامة تحل هذا باستخدام نافذة React. ما هي أفكار المتحمسين لإدخال هذا التبعية؟

سأكون مهتمًا بإنشاء علاقات عامة تحل هذا باستخدام نافذة React. ما هي أفكار المتحمسين لإدخال هذا التبعية؟

كنت في حاجة ماسة إلى هذا لفترة من الوقت الآن. قد أجبر على تنفيذ طاولتي خارج AntD باستخدام نافذة التفاعل في الوقت الحالي. حتى يتم دعم ذلك ، يكون الأداء غير مقبول للقوائم الطويلة وأحتاج إلى جدول قابل للاستخدام به العديد من الصفوف (يحتاج إلى المحاكاة الافتراضية).

@ swillis12 في فريقي ، نستخدم جداول

ما زلت أرغب في رؤية هذه المشكلة تم تمييزها على أنها تم حلها .. القوائم الطويلة غير قابلة للاستخدام في الوقت الحالي ..

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

https://github.com/bvaughn/react-window

ربما يجب أن نجعل هذا مدمجًا.

هذا العدد مفتوح منذ سنتين. . . . . .

أن تأتي متأخرا أفضل من ألا تأتي أبدا! 😉

لذا ، أي تقدم؟

مهلا! نحن نحب هذا! كيف الحال؟

يستخدم المشروع treetable وقد يحتوي على عدد كبير من العقد ، لذلك قمت بتعديل الكود بناءً على جدول antd وأضفت تحميلًا افتراضيًا. هناك 1999 عقدًا فرعية تحت كل عقدة في العرض التوضيحي.قد يكون هناك أخطاء ولا اختبار مفصل.

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

اتبع +1

هناك أيضًا مشكلة غريبة. عند وجود Form و Table كمكونات للأخوة ، فإن الإدخال في Form سيكون عالقًا للغاية ، خاصة عندما Table عندما يكون هناك fixed ، تكون الصفحة بأكملها في حالة عملية غير متوفرة. Table يتم ترحيل البيانات في الخلفية ، 30 صفًا لكل صفحة. سأضيف عرضًا توضيحيًا لاحقًا. مرر react tool اكتشف Form نفس المستوى. ومع ذلك ، فإن أي عملية على صفحة القائمة ستظل تؤدي إلى ازدحام الصفحة.

package.json

"antd": "^3.12.3",
 "react": "^16.3.2",

لا تقوم الصفحة بأي منطق آخر باستثناء تحميل البيانات في DidMount.

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

سأكون مهتمًا بإنشاء علاقات عامة تحل هذا باستخدام نافذة React. ما هي أفكار المتحمسين لإدخال هذا التبعية؟

كنت في حاجة ماسة إلى هذا لفترة من الوقت الآن. قد أجبر على تنفيذ طاولتي خارج AntD باستخدام نافذة التفاعل في الوقت الحالي. حتى يتم دعم ذلك ، يكون الأداء غير مقبول للقوائم الطويلة وأحتاج إلى جدول قابل للاستخدام به العديد من الصفوف (يحتاج إلى المحاكاة الافتراضية).

@ swillis12 مرحبًا ، كيف انتهى بك الأمر إلى التعامل مع مشكلة أداء الجدول؟

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

أعتقد أن المستندات لديها أمثلة مع المحاكاة الافتراضية ، والتي يجب أن تفعل
الخدعة.

في الخميس ، 28 مارس 2019 ، الساعة 4:48 صباحًا كتب Dane [email protected] :

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

-
أنت تتلقى هذا لأنه تم ذكرك.
قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على GitHub
https://github.com/ant-design/ant-design/issues/3789#issuecomment-477502300 ،
أو كتم الخيط
https://github.com/notifications/unsubscribe-auth/ACMpUYf-yuPS8ag-mr47H7b4Z2rWHVnLks5vbIHSgaJpZM4KueVV
.

لقد كنت أتابع هذه المشكلة منذ أكثر من عام ...
لم يتم حلها بعد ...
إذن رد الفعل الافتراضي ونافذة التفاعل معقدان للغاية والعديد من الميزات ، ولست بحاجة إلى أن تكون المستندات المميزة كسولة جدًا بحيث لا يمكن قراءتها ، لقد صنعت عجلة صغيرة بنفسي <br i="8"/> الميزة هي أنه لا توجد تبعية أخرى باستثناء التفاعل وارتفاع كل سطر يمكن أن تكون ديناميكية ، لا داعي للتنازل عنها مسبقًا

https://github.com/Autodesk/react-base-table انظر إلى هذا

جيثب

أوتوديسك / رد فعل قاعدة الجدول

مكون جدول التفاعل لعرض مجموعات البيانات الكبيرة ذات الأداء العالي والمرونة - Autodesk / رد فعل قاعدة الجدول

معني ... يحتاج العمل لعرض 1000 صف من البيانات.

https://github.com/bvaughn/react-window

ربما يجب أن نجعل هذا مدمجًا.

أي مزيد من التقدم؟

أحاول إنشاء منتقي الوقت مع إدخال وإدراج منسدلة ، لذلك أحتاج إلى عرض 1440 عنصرًا (24 ساعة * 60 دقيقة) في التراكب المنسدلة مع القائمة ، لأن القائمة المنسدلة لا تعمل مع المكونات الأخرى.

لكن أداء القائمة المنسدلة مع هذا الكم من البيانات مروع.

لذا ، سؤالي هو: ما الذي يمكنني فعله لاستخدام نافذة التفاعل كتراكب قائمة منسدلة؟

أود نشر مخاوفي هنا أيضًا. لقد كنا نحاول عرض قائمة منسدلة محددة لقائمة تحتوي على القائمة الكاملة لتصنيف منتجات Google ولكنها بطيئة جدًا مع بضع ثوانٍ من التأخير قبل أن أتمكن من رؤية القائمة المنسدلة. ما هو التقدم حتى الآن؟

أريد أن أعرف ما إذا كان هناك حل الآن؟
أريد استخدام رد الفعل الافتراضي في الإكمال التلقائي ، لكن لا يمكنني استخدامه. عندما أعودالمكون في طريقة rowRenderer في القائمة ، يظهر لي خطأ.

jingxiawl أحد الحلول هو جعل القائمة المنسدلة قائمة منسدلة قائمة على البحث. من منظور مختلف ، ليس من السهل جدًا عرض قائمة طويلة من العناصر للمستخدم للتمرير لأسفل يدويًا أيضًا ، لذلك أستخدم الحالات لإدارة قائمة الاختيار المنسدلة من خلال تصفية عبارة البحث. إذا كنت تستخدم React hooks ، فيمكنك الاستفادة من useEffect لتقليل إعادة عرض المكون.

نأمل أن يقلل هذا من آلام عمليات العرض البطيئة. ومع ذلك ، ما زلت آمل ألا يتباطأ هذا المكون بسبب قائمة التحديدات الأطول.

تضمين التغريدة
شكرا لك. لكن المشكلة الآن هي أن هناك الكثير من البيانات التي تمت تصفيتها ، وستكون هناك دائمًا مشاكل في القوائم الطويلة.

yoonwaiyan هل لديك أي أمثلة على ذلك؟

الجدول الظاهري antd.Table ، API متوافق تمامًا مع الجدول الأصلي ، لا حاجة لتمرير rowHeight
https://github.com/ctq123/ant-virtual-table

reconbot هذا مثال بسيط قمت به باستخدام React hooks.

استنادًا إلى نافذة التفاعل ، مكون نموذج يعمل بكامل طاقته
https://github.com/nexxLuo/tablex

reconbot هذا مثال بسيط قمت به باستخدام React hooks.

لا يزال بطيئا جدا بالنسبة لي.

douglasjunior yup ، لا يُقصد به حل المشكلة تمامًا ولكن بالأحرى حل مؤقت لرمز الإنتاج الخاص بي على الأقل لعدم إعطاء تجربة تحميل سيئة للمستخدم ، لكنني منفتح على اقتراح كيفية تحسينها بشكل أكبر.

يمكنك الرجوع إلى ant-virtual-table على أنها مرتبطة ببعض الخيوط أعلاه لترى كيف قاموا بحل هذه المشكلة للجدول كما زعموا.

بالمناسبة ، يحتوي منشور SO هذا على بعض الحلول الشرعية لمشكلة القائمة الطويلة ، ونأمل أن يتمكن فريق antd من إلقاء نظرة عليها: https://stackoverflow.com/questions/38033442/big-list-performance-with-react

مرحبا فريق النمل
هل هناك أخبار عن هذا الموضوع؟ أي خطة لإصلاحه في أي وقت قريب؟ من المؤلم جدًا استخدام جدول القائمة عند وجود الكثير من البيانات
@ afc163
بعمل عظيم من جانب الطريق !!!

مرحبا فريق النمل
أنا أستخدم مكون Tree مع التحميل البطيء ، ولدي ما يقرب من 20000 TreeNodes كأطفال أقل من TreeNode . يعد التنقل عبر الشجرة بهذا العدد الكبير من البيانات بطيئًا ومؤلمًا. أي شيء جديد حول هذه القضية؟

مرحبا فريق النمل ،
الحب الأول لمكونات الحب.
أنا أستخدم مكون التحديد وأحتاج حقًا إلى إضافة react-window أو طريقة أخرى لتحسينه ، حيث يوجد أكثر من 2000 خيار مما يجعل المكون بطيئًا بشكل مؤلم. يرجى إعلامي إذا كان لديك أي تحديثات بشأن هذا.

هل يمكننا استخدام هذا لبعض المرجع؟ يحتوي هذا المستودع على الكثير من المعلومات المهمة لمكون الجدول.

https://github.com/wubostc/virtualized-table-for-antd

يعتمد SuperSelect على antd Select ، والذي يدعم قائمة افتراضية لعشرات الآلاف من البيانات ، وهي نفس واجهة برمجة التطبيقات مثل antd Select ، والتي تعمل بشكل جيد في مشروعي.

الآن ، SuperSelect انتقل إلى antd-virtual-select

antd-virtual-select repo

هذا عرض

أشياء رائعةiblq! لقد أجريت تعديلًا طفيفًا على العرض التوضيحي الخاص بك ليشمل مقارنة مع النملة حدد https://codesandbox.io/s/superselect-8xlwk

مرحبا فريق النمل ،
الحب الأول لمكونات الحب.
أنا أستخدم مكون التحديد وأحتاج حقًا إلى إضافة react-window أو طريقة أخرى لتحسينه ، حيث يوجد أكثر من 2000 خيار مما يجعل المكون بطيئًا بشكل مؤلم. يرجى إعلامي إذا كان لديك أي تحديثات بشأن هذا.

https://github.com/react-component/select إصدار ألفا ينفذ بالفعل التمرير الافتراضي.
عليك فقط انتظار antd 4.0 للحصول عليه.

megawac lmao ماذا. هل نتبع نفس الموضوع؟ أين كان أي شخص يعرض عليك توظيفك؟

أعتقد أنني سأضطر إلى الانتظار حتى 4.0 ⌚️

العرض التوضيحي SuperSelect أعلاه مذهل جدًا ، رغم ذلك ، ngl. أداء جدا أيضا. لسوء الحظ ، لا أرغب في نسخ ولصق أكثر من 300 سطر للحصول على مؤدٍ Select ، خاصة وأنني أستخدم TypeScript وهو في JS. لا يزال رائعًا!

أتمنى ألا يقتصر react-window على القوائم ...

خيار آخر هو رد الفعل الافتراضي-التحديد ، ولكن هناك مشكلتان: 1) إنه ليس Ant 😄 ، 2) لم يعد يتم الاحتفاظ به ، لذلك إذا واجهت مشاكل ، 🤷‍♂

لأي شخص يتساءل ، أحد الحلول لهذه البيانات غير المنسدلة / المحددة هو المكون List مع خاصية pagination الاختيارية. يعمل كالسحر!

يجب أن يتعامل LazySelectInput مع التحميل> 2000 دون أي مشكلات في التقديم.

يقوم مكون الجدول الجديد أيضًا بتنفيذ قائمة افتراضية ، راجع https://github.com/react-component/table/releases/tag/v7.0.0-alpha.16

abenhamdine هل هناك أي طريقة يمكننا من خلالها استخدام مكون الجدول الجديد لدعم المحاكاة الافتراضية مع مشاريع تصميم النمل الحالية؟

abenhamdine هل هناك أي طريقة يمكننا من خلالها استخدام مكون الجدول الجديد لدعم المحاكاة الافتراضية مع مشاريع تصميم النمل الحالية؟

ربما ، ولكن IMHO من الأفضل انتظار antd 4.0 ، تم دمج مكون جدول جديد بالفعل في 4.0 فرع تحضير.

بالأمس حاولت إضافة إصدار ألفا ولكن لم يكن ناجحًا.

حسنًا ، سأستخدم هذا الآن.

https://github.com/wubostc/virtualized-table-for-antd

لقد كان مستندًا فوضويًا بعض الشيء ، وكنت بحاجة أيضًا إلى إصلاح css قليلاً.

هل هناك طريقة يمكننا من خلالها استخدام مكون التحديد الجديد في الإصدار 3 بينما ننتظر الإصدار 4؟ أم أن هناك مكونًا محددًا لطرف ثالث يقوم بتنفيذ قائمة افتراضية وبنفس نمط antd؟

تعديل.
أنا أستخدم مكون SuperSelect المنشور أعلاه ويعمل بشكل مثالي

أي تحديث ؟

@ shivam-ahuja يمكنك محاولة تحديد مكون في antd 4 ، 4.0.0-rc1 خارج.
راجع https://next.ant.design/components/select/#components -select-demo-big-data

هل تم عمل تصفية الجدول؟ ما زلت أعاني من أوقات تحميل طويلة عند تصفية مجموعات كبيرة من البيانات كما هو موضح في # 11331. التصفية غير قابلة للاستخدام إلى حد كبير مع وجود جدول يحتوي على أكثر من 1000 عنصر.

تم تحسين أداء عرض القائمة الطويلة في الإصدار 4: https://github.com/ant-design/ant-design/issues/21656