React-window: संस्करण 2 परिवर्तन

को निर्मित 29 जुल॰ 2019 · 44टिप्पणियाँ · स्रोत: bvaughn/react-window

यह react-window के आगामी संस्करण 2.0 के लिए मेरी योजनाओं को साझा करने के लिए एक छाता मुद्दा है।

प्रतिक्रिया की सराहना की जाती है और इसे ध्यान में रखा जाएगा। मैं पूछता हूं कि आप समझ रहे हैं कि क्या मैं सभी अनुरोधों को समायोजित करने में सक्षम नहीं हूं। मैं बंडल आकार, रनटाइम प्रदर्शन और रखरखाव चिंताओं के खिलाफ सुविधा अनुरोधों को तौलना करने की पूरी कोशिश करूंगा।

मुझे उम्मीद है कि संस्करण 1 से 2 में अपग्रेड करने के लिए पर्याप्त कोड परिवर्तन की आवश्यकता हो सकती है , जिनमें से कई कोड मॉड के साथ स्वचालित करना संभव नहीं होगा। इसके कारण, विशेष रूप से एप्लिकेशन कोड के लिए, मैं मौजूदा कोड को अपग्रेड करने के खिलाफ सलाह दूंगा जब तक कि आपके पास एक मजबूत कारण न हो (जैसे आपको डायनामिक आकार सामग्री के लिए समर्थन की आवश्यकता है)।

मैं भी आगे जा रहा हूँ और वर्तमान डॉक्स को डोमेन पर पिन कर रहा हूँ- विंडो-v1.now.sh। ताकि जब मैं संस्करण 2 के लिए अद्यतन

विषयसूची:

कम घटकों का समर्थन करें
रेंडर प्रॉप्स एपीआई का उपयोग करें
कोई और अधिक क्षैतिज सूची का समर्थन नहीं करता है
केवल ग्रिड RTL का समर्थन करते हैं
onScroll कॉलबैक समय में परिवर्तन
* अन्य परिवर्तन / deprecations

कम घटक

जटिलता का प्रबंधन करने में मदद करने का एक तरीका यह है कि पुस्तकालय द्वारा समर्थित घटकों की संख्या को

SimpleList (पहले FixedSizeList )
- यह अत्यधिक अनुकूलित सूची घटक का उपयोग तब किया जाना चाहिए जब पंक्ति ऊँचाई तय की जाती है (और समय से पहले जाना जाता है)।
List (पहले DynamicSizeList )
- इस सूची का उपयोग गतिशील रूप से आकार की सामग्री (जैसे चैट, न्यूज़फ़ीड) के लिए किया जाना चाहिए। इसके लिए ResizeObserver API (या पॉलीफ़िल) की आवश्यकता होती है।
Grid (पहले VariableSizeGrid )
- इस घटक का उपयोग सारणीबद्ध डेटा (जैसे स्प्रेडशीट) के लिए किया जाना चाहिए जिसे ऊर्ध्वाधर और क्षैतिज अक्ष के साथ वर्चुअलाइज्ड किया जाना चाहिए। यह चर आकार पंक्तियों और स्तंभों का समर्थन करता है, लेकिन अपने आकार को मापने और अद्यतन करने का स्वचालित रूप से समर्थन नहीं करता है।

रेंडर प्रॉप्स

react-virtualized से react-window में किए गए प्रमुख परिवर्तनों में से react-virtualized children को रिएक्ट एलिमेंट्स (उदाहरण के लिए React.createElement(children, props)) ) के बजाय प्रॉप्स के रूप में children(props) )।

ऐसा करने के लिए कुछ प्रेरणाएँ थीं:

रिएक्ट मेमोइज़ेशन के लिए बिल्ट-इन सॉल्यूशन प्रदान करता है (जैसे React.memo , useMemo , shouldComponentUpdate ) इसलिए मुझे आइटम रेंडरर्स के लिए अपना कैशिंग अमूर्त लागू करने की आवश्यकता नहीं थी।
आइटम जैसे रेंडर के अंदर हुक और सस्पेंस "बस काम" जैसे एपीआई।
कुंजी को react-window द्वारा प्रबंधित किया जा सकता है, साथ ही उन्हें पास करने के लिए रेंडर प्रोप की आवश्यकता होती है (और cloneElement कॉल की आवश्यकता के बिना)।

दुर्भाग्य से कुछ डाउनसाइड भी थे:

इनलाइन आइटम रेंडरर्स एक उच्च लागत को लागू करते हैं। क्योंकि उनका "प्रकार" (फ़ंक्शन परिभाषा) मूल घटक रेंडर करने पर हर बार फिर से तैयार हो जाता है, फिर से गहराई से अनमाउंट करता है और आपके रेंडर किए गए पेड़ को हटा देता है। इसका मतलब यह है कि डॉक्स को लोगों को सिखाने की ज़रूरत है, भले ही वे अधिक सुविधाजनक होने के बावजूद उनका उपयोग न करें।
क्योंकि इनलाइन फ़ंक्शन का उपयोग स्थानीय दायरे को बंद करने के लिए नहीं किया जा सकता है, इसलिए आइटम रेंडरर्स के लिए माता-पिता के साथ राज्य साझा करना अधिक जटिल था, इसके लिए API को itemData आवश्यकता होती है

उपरोक्त पेशेवरों और विचारों को ध्यान में रखने के बाद, मैंने react-window के लिए एक रेंडर प्रॉपर दृष्टिकोण में बदलने का फैसला किया है । इसका मतलब है कि इस तरह के जटिल उदाहरणों को और आसानी से लिखा जा सकता है:

const Example = ({ height, items, toggleItemActive, width }) => (
  <List
    height={height}
    itemCount={items.length}
    itemRenderer={({ index, key, style }) => {
      const item = items[index];
      return (
        <div key={key} onClick={() => toggleItemActive(index)} style={style}>
          {item.label} is {item.isActive ? "active" : "inactive"}
        </div>
      );
    }}
    itemSize={35}
    width={width}
  />
);

कोई और अधिक क्षैतिज सूची का समर्थन नहीं

पहले, सूची घटकों ने क्षैतिज और ऊर्ध्वाधर दोनों लेआउट मोड का समर्थन किया। कार्यान्वयन और रखरखाव को आसान बनाने के लिए, और क्योंकि अत्यधिक सामान्य उपयोग का मामला लंबवत सूचियों का है, मैं layout="horizontal" लिए समर्थन को हटा दूंगा।

RTL सपोर्ट

ग्रिड घटक direction="RTL" का समर्थन करना जारी रखेंगे, लेकिन सूचियां नहीं होंगी (क्योंकि वे केवल एक ऊर्ध्वाधर लेआउट का समर्थन करेंगे)। यह ट्रेडऑफ सूचियों को छोटा और बनाए रखने में आसान बनाने के लिए किया जा रहा है।

`onItemsRendered` और `onScroll` कॉलबैक परिवर्तन

सूची और ग्रिड घटक वर्तमान में onItemsRendered और onScroll कॉलबैक सहारा का समर्थन करते हैं। इन कॉलबैक को प्रतिबद्ध चरण के दौरान (सूची या ग्रिड पूरा होने के बाद) कहा जाता है। यह इस रूप में उपयोगी हो सकता है कि इन कॉलबैक के जवाब में साइड इफ़ेक्ट (जैसे एनालिटिक्स लॉगिंग) करना हमेशा सुरक्षित होता है, लेकिन इसके साथ ही एक नकारात्मक पहलू भी है: कोई भी स्क्रॉल सिंक्रनाइज़ अपडेट एक सेकंड में किया जाना चाहिए ("कैस्केडिंग") ।

संस्करण 2 इसको संबोधित करने के लिए onScroll कॉलबैक में बदलाव करेगा। घटना के प्रेषण चक्र के दौरान onScroll कॉलबैक को कॉल किया जाएगा ताकि किसी भी अपडेट को सूची या ग्रिड के स्वयं के अपडेट के साथ बैच किया जाएगा।

onItemsRendered कॉलबैक को onItemsDisplayed प्रोप के साथ बदल दिया जाएगा , हालांकि इसे प्रतिबद्ध चक्र के दौरान कहा जाता रहेगा। यह परिवर्तन सूची घटक को निष्क्रिय प्राथमिकता पर पूर्व-प्रतिपादन द्वारा प्रदर्शन को और अधिक आक्रामक रूप से अनुकूलित करने के लिए सक्षम करने और प्रदर्शन लॉकिंग जैसे प्रयोगात्मक एपीआई का उपयोग करने के लिए किया जा रहा है।

अन्य रंगमंच की सामग्री / परिवर्तन

कई लंबित अवक्षेपण (DEV चेतावनियों के साथ) हैं जिन्हें हटा दिया जाएगा:

सभी सूची और ग्रिड घटकों के लिए innerTagName और outerTagName । (इसके बजाय innerElementType और outerElementType उपयोग करें।)
ग्रिड घटक के लिए overscanCount , overscanColumnsCount , और overscanRowsCount । (इसके बजाय overscanColumnCount और overscanRowCount उपयोग करें।)
डायनामिक ओवरस्कैनिंग दृष्टिकोण के पक्ष में overscanCount को सूची घटकों के लिए हटा दिया जाएगा।
direction लिए "क्षैतिज" और "ऊर्ध्वाधर" मान। (इन्हें layout में स्थानांतरित किया गया था, लेकिन इन्हें पूरी तरह से संस्करण 2 में हटा दिया जाएगा)
itemData प्रोप (और इसी data प्रोप आइटम रेंडरर्स के लिए पारित) को हटा दिया जाएगा क्योंकि एक रेंडर प्रोप एपीआई में परिवर्तन अब यह आवश्यक नहीं बनाते हैं।
useIsScrolling प्रोप (और इसी isScrolling प्रोप को आइटम रेंडरर्स को पारित कर दिया गया) हटा दिया जाएगा क्योंकि प्री-रेंडरिंग और डिस्प्ले लॉकिंग में बदलाव इसे लागू करने के लिए और अधिक महंगा बना देगा।
स्क्रॉल संरेखित पैरामीटर थोड़ा बदल जाएगा। पहले नामित "ऑटो" अब "न्यूनतम" नाम दिया जाएगा। नया डिफ़ॉल्ट मान "स्मार्ट" ("ऑटो" के बजाय) होगा।

ध्यान दें कि उपर्युक्त कुछ प्रॉप्स अभी भी अन्य नियोजित परिवर्तनों को देखते हुए प्रासंगिक नहीं हो सकते हैं, लेकिन मैं उन्हें पूर्णता के लिए वैसे भी यहां सूचीबद्ध कर रहा हूं।

👋 help wanted 💬 discussion

स्रोत

bvaughn

👍59 ❤18 🚀17 🎉10 👀4 😕1

सबसे उपयोगी टिप्पणी

हमारे मामले में मोबाइल पर क्षैतिज सूचियों का व्यापक रूप से उपयोग किया जाता है। हम उन्हें नियंत्रण की तरह अनंत स्क्रॉल हिंडोला के लिए भी उपयोग कर रहे हैं। मोबाइल पर IMO की बात होनी चाहिए।

istarkov 29 जुल॰ 2019

👍24 😕2

सभी 44 टिप्पणियाँ

istarkov 29 जुल॰ 2019

👍24 😕2

उपयोग मामला साझा करने के लिए धन्यवाद @istarkov। ऐसा नहीं है कि मुझे नहीं लगता कि क्षैतिज विंडोिंग के लिए _any_ वैध उपयोग के मामले हैं। मुझे लगता है कि वे बहुत कम आम हैं। (यहां तक कि हिंडोला के मामले में, कई लोग बाएं / दाएं तीर नेविगेशन का उपयोग करते हैं जिन्हें "स्क्रॉल" इवेंट आधारित विंडोिंग की आवश्यकता नहीं होती है।) मुझे लगता है कि v2 के लिए समर्थन छोड़ने के लिए यह अभी भी बेहतर मार्ग (मेरे लिए) हो सकता है। मैं पहले से रेंडरिंग, डायनामिक साइज़िंग आदि के साथ शुरुआत करने की योजना बना रहा हूँ।

bvaughn 29 जुल॰ 2019

👍8 😕2 ❤1

मैं वास्तव में इस दुबले दृष्टिकोण के लिए उत्साहित हूं जो उम्मीद करता है कि सरल, अधिक प्रदर्शन करने वाला और सरल कोड होगा।

chrisnojima 29 जुल॰ 2019

👍7

महान। लेकिन मुझे चर आकार सूची को छोड़ने के बारे में कुछ चिंताएं हैं। आप डायनामिकलिस्ट के साथ परिवर्तनशील आकार की सूची को बदलने की योजना बना रहे हैं, लेकिन डायनेमिक सूची के साथ समस्या जिसे आप आइटम पर स्क्रॉल नहीं कर सकते हैं, जो कुछ घटकों के लिए बहुत उपयोगी सुविधा हो सकती है और ऐसी आवश्यकता समय के साथ आ सकती है, इसलिए आप अनुमान नहीं लगा सकते हैं कि प्रतिक्रिया-खिड़की आपकी आवश्यकताओं को पूरा करती है।
दूसरा मुद्दा जो मैं देख रहा हूं वह है डायनेमिक सूची प्रदर्शन, अगर आप डायनामिक सूची के लिए वैसा ही प्रदर्शन प्रदान कर सकते हैं जैसा कि चर आकार सूची के लिए हो सकता है, तो इसे छोड़ना ठीक होगा भले ही आप स्क्रॉलटाइटम का समर्थन नहीं करेंगे, लेकिन यदि नहीं, तो डेवलपर्स को लॉक किया जा सकता है। अजीब परिस्थितियां जहां डायनामिक सूची धीमी है और आइटम समर्थन के लिए कोई स्क्रॉल नहीं है, सूची में केवल निश्चित आइटम ऊंचाई है।

zmitry 29 जुल॰ 2019

👀1

आप डायनामिकलिस्ट के साथ चर आकार सूची को बदलने की योजना बना रहे हैं, लेकिन डायनामिक सूची के साथ समस्या जिसे आप आइटम पर स्क्रॉल नहीं कर सकते हैं

मुझे नहीं लगता कि यह एक अंतर्निहित सीमा है, वर्तमान कार्यान्वयन में से एक है। मेरे पास विचार हैं कि मैं उस फ़ंक्शन को कैसे प्रस्तुत कर सकता हूं। क्या मुझे इससे निपटने का समय मिलेगा

दूसरा मुद्दा जो मैं देख रहा हूं वह है डायनेमिक सूची प्रदर्शन, अगर आप डायनामिक सूची के लिए वैसा ही प्रदर्शन प्रदान कर सकते हैं जैसा कि चर आकार सूची के लिए हो सकता है, तो इसे छोड़ना ठीक होगा भले ही आप स्क्रॉलटाइटम का समर्थन नहीं करेंगे, लेकिन यदि नहीं, तो डेवलपर्स को लॉक किया जा सकता है। अजीब परिस्थितियां जहां डायनामिक सूची धीमी है और आइटम समर्थन के लिए कोई स्क्रॉल नहीं है, सूची में केवल निश्चित आइटम ऊंचाई है।

कहना मुश्किल है कि क्या यह अच्छा प्रदर्शन करेगा। गतिशील सूची की तरह लगता है और अधिक काम करना होगा ताकि यह संभावना है कि यह बहुत अच्छा प्रदर्शन नहीं करेगा। शायद अंतर महत्वपूर्ण होगा, शायद नहीं। मैं कुछ ऐसी चीजों का समर्थन करने में सक्षम होना चाहता हूं जो मैं वर्तमान में नहीं करता हूं, और मुझे लगता है कि मुझे नई सुविधाओं को जोड़ने के लिए गुंजाइश काटने की जरूरत है। यदि आप वर्तमान में परिवर्तनशील सूची से खुश हैं, तो v2 में अपग्रेड करने का कोई कारण नहीं है (कम से कम किसी भी समय)।

bvaughn 30 जुल॰ 2019

@bvaughn यह मुझे दस्तावेज की तरह लग रहा है!
क्या आप पिछली गर्मियों से इस पर काम कर रहे हैं? ;-)

एक और अधिक गंभीर नोट पर - मुझे लगता है कि रेंडर प्रॉप्स इस संदर्भ में मायने रखते हैं, भले ही मैं प्रशंसक नहीं हूं।

babangsund 30 जुल॰ 2019

नहीं, मैंने आज सुबह लिखा था exhaust मैं थक गया हूं।

मुझे लगता है कि रेंडर प्रॉप्स इस संदर्भ में मायने रखते हैं, भले ही मैं प्रशंसक नहीं हूं।

क्या आप विस्तृत कर सकते हैं कि आप प्रशंसक क्यों नहीं हैं?

bvaughn 30 जुल॰ 2019

क्या क्षैतिज सूची / ग्रिड समर्थन AutoSizer (प्रतिक्रिया-वर्चुअलाइज्ड-ऑटो-सिज़र) जैसी सुविधा में विकल्प के रूप में समझ में आता है?

मैंने क्षैतिज सूचियों के लिए प्रतिक्रिया-वर्चुअलाइज्ड और प्रतिक्रिया-विंडो दोनों का उपयोग किया है, और प्रतिक्रिया-विंडो एपीआई को बहुत सरल पाया है। हालाँकि मुझे लगता है कि सरल एपीआई के लिए आशाओं में वंचित होने की आवश्यकता है।

snesjhon 30 जुल॰ 2019

👍3

ग्रिड समर्थन अभी भी योजनाबद्ध है। क्षैतिज समर्थन में ऑप्ट, वास्तव में नहीं। मुझे नहीं लगता कि इससे कोई मतलब होगा।

bvaughn 30 जुल॰ 2019

👍1

@bvaughn मैं आम तौर पर रेंडर प्रॉप्स का आनंद

babangsund 30 जुल॰ 2019

क्या आप चिनाई ग्रिड का एहसास कर सकते हैं?

nikitapilgrim 30 जुल॰ 2019

@nikitapilgrim नहीं। मैं केवल Masonry react-virtualized से दूंगा

https://github.com/bvaughn/react-virtualized/blob/master/docs/Masryryd.d

bvaughn 30 जुल॰ 2019

धन्यवाद, लेकिन केवल प्रतिक्रिया-वर्चुअलाइज्ड के साथ इसका काम?

nikitapilgrim 31 जुल॰ 2019

@ मिनीतपिलग्रीम यप । 👍
रिएक्ट-वर्चुअलाइज्ड सुविधाओं का एक गुच्छा का समर्थन करता है, जो प्रतिक्रिया-विंडो नहीं करता है।

पैकेज को छोटा और तेज बनाने पर ध्यान केंद्रित करने के लिए प्रतिक्रिया-खिड़की का दायरा बहुत कम हो गया है। 😉

यदि आपको प्रतिक्रिया-वर्चुअलाइज्ड से सुविधाओं की आवश्यकता है, तो मेरा सुझाव है कि आप इसके साथ रहें - यह अभी भी एक महान पुस्तकालय है!

babangsund 31 जुल॰ 2019

मैंने react-window पर ठोकर खाई क्योंकि मैं इस react-virtualized babel 7 समस्या का हल ढूंढ रहा था। मैं react-virtualized Masonry घटकों का उपयोग कर रहा हूं, लेकिन babel अपग्रेड करने के बाद अब और नहीं कर सकता।

wallzero 13 अग॰ 2019

यह प्रतिक्रिया-वर्चुअलाइज्ड के साथ मुद्दों की रिपोर्ट करने की जगह नहीं है।

bvaughn 13 अग॰ 2019

सहमत @bvaughn। हालांकि अपने आप को और @babangsund ऊपर है कि एक @nikitapilgrim का जवाब दिया Masonry घटक में पेश नहीं किया जाएगा react-window उपयोग करने के लिए और बदले react-virtualized । हालांकि, यदि कोई उपयोगकर्ता नवीनतम [email protected] और [email protected] (जैसे create-react-app ) के साथ है, तो react-virtualized आवश्यक रूप से काम नहीं करेगा।

मुझे लगता है कि किसी और खरगोश के छेद के नीचे जाने के लिए उपयोगी जानकारी है।
¯ \ _ (ツ) _ / ツ

wallzero 13 अग॰ 2019

हे मैं गतिशील आकार सूची का उपयोग करना चाहता हूं, जहां मैं संस्करण 2 डाउनलोड कर सकता हूं या मुझे प्रतिक्रिया का उपयोग करना होगा?

यह है कि मेरी सूची चर आकार सूची के साथ कैसे दिख रही है

ShivamJoker 17 अग॰ 2019

यह एक सामान्य समर्थन मुद्दा नहीं है। कृपया विषय पर टिप्पणी रखें।

bvaughn 17 अग॰ 2019

प्रतिक्रिया की सराहना की है

मैं ट्रेलो जैसे उत्पाद पर react-window का उपयोग कर रहा हूं और यहां कुछ विचार दिए गए हैं:

रेंडर प्रॉप्स

यह सादगी के कारण एक अच्छा बदलाव और उल्लेखित नकारात्मकता से बचने के लिए लगता है। इसके अलावा, एपीआई, प्रतिक्रिया-मूल के फ्लैटलिस्ट के समान होगा। मुझे https://github.com/bvaughn/react-window/issues/85 पर चर्चा पढ़ना याद है

कम घटक
कोई और अधिक क्षैतिज सूची का समर्थन नहीं

मैं horizontal समर्थन और VariableSizeList को हटाने के खिलाफ अत्यधिक वोट करता हूं। जैसा कि आप कल्पना कर सकते हैं, ये मुख्य दो हैं जो मैं उपयोग करता हूं। क्या उनका क्रियान्वयन वास्तव में बनाए रखने के लिए बहुत अधिक बोझ है? यदि नहीं, तो मुझे आशा है कि आप पुनर्विचार कर सकते हैं और उन्हें रख सकते हैं।

मेरे पास अन्य परिवर्तनों से संबंधित कोई मजबूत राय नहीं है। overscanCount को हटाने से मुझे थोड़ी चिंता होती है, लेकिन मैंने ऐसे मामलों का उपयोग नहीं किया है जहां अभी तक कस्टम मूल्य की आवश्यकता थी, इसलिए यह शायद ठीक है।

brunolemos 27 अग॰ 2019

👍4 👀1

अरे @bvaughn! इस पैकेज के लिए धन्यवाद! मैं काम पर अपनी परियोजना में संस्करण 2 को शामिल करना चाह रहा हूं। क्या आपके पास बॉलपार्क है जब यह जारी किया जा सकता है?

chippawah 18 सित॰ 2019

इस लाइब्रेरी के लिए धन्यवाद, और भविष्य की रिलीज़ के लिए अपनी योजना साझा करना तकनीकी ऋण को कम करने में हमारी मदद करने के लिए बहुत उपयोगी है।

क्या हाल के react-window और बाद में संस्करण 2 का उपयोग करके WindowScroller व्यवहार करने का एक "सरल" तरीका है?

यदि यह संभव नहीं है तो यह इस संस्करण 2 की परिधि से बाहर होगा? या इसे बाद में जोड़ा जा सकता है?

मेरा संदर्भ यह है कि मेरे लेआउट में एक पाद लेख शामिल है, और DynamicSizeList जैसे आधुनिक दृष्टिकोण का उपयोग करते हुए एक दूसरा स्क्रॉल बार (पेज के लिए एक और उत्पादों की सूची के लिए एक) पेश करेगा

ltkn 20 सित॰ 2019

👀1 👍1

बढ़िया पैकेज। डिफ़ॉल्ट रूप से गतिशील ऊंचाई सूचियों का बेसब्री से इंतजार - फिलहाल मैंने अभिभावक सूची के लिए रेंडर हाइट्स को पास करने के लिए कस्टम तर्क का एक गुच्छा लिखा है। उम्मीद है कि इस नए संस्करण के साथ मैं उस तर्क को हटा सकता हूं। इस पर आपके काम के लिए धन्यवाद!

dgurns 14 नव॰ 2019

@ltkn @mrdanimal

विंडो स्क्रोलर का उपयोग करने का एक तरीका पहले से है:
https://github.com/bvaughn/react-window/issues/30#issuecomment -428868071

PascalSenn 14 नव॰ 2019

👍1

स्क्रॉल को कैसे करें दोनों दिशाओं में अनंत, बाएं या दाएं !!!

galbeiroc 19 नव॰ 2019

यदि हमारे पास WindowScroller बिना react-virtualized निर्भर करता है तो यह बहुत अच्छा होगा। क्योंकि पीछे लक्ष्य react-window यह बहुत प्रभावी और कम कोड की तुलना में बनाया react-virtualized तो, मैं का उपयोग नहीं करना चाहते हैं WindowScroller से react-virtualized । इसके बजाय react-virtualized-auto-sizer जैसे एक अलग पैकेज की तलाश में हैं।

अग्रिम में धन्यवाद।

prabusamvel 11 दिस॰ 2019

@ प्रभासमवेल ह्म ।।
एक अलग पैकेज का क्या फायदा है?

PascalSenn 16 दिस॰ 2019

नए डायनेमिकसाइज़लिस्ट के साथ खेल रहा है। बहुत ही शांत! मुझे लगता है कि 'टीटीबी' और 'बीटीटी' (टॉप-टू-बॉटम, बॉटम-टू-टॉप) को डायरेक्शन टाइप में शामिल करने के लिए बहुत अच्छी एन्हांसमेंट होगी। वर्तमान में सूची को लागू करने का कोई साफ तरीका नहीं है जो ऊपर की ओर स्क्रॉल करता है, लेकिन हर दूसरी दिशा का समर्थन किया जाता है।

toddmacintyre 18 जन॰ 2020

👍9 👀1 ❤1

@toddmacintyre मैं यह संस्करण 2 नहीं पा सकता हूं। क्या कोई मुझे मार्गदर्शन दे सकता है?

ghost 23 जन॰ 2020

@ ममुहम्मेदगदी npm install react-window@next

mjurkowski 29 जन॰ 2020

यह शानदार होगा यदि संस्करण 2 यहां युक्ति द्वारा आवश्यक डोम संरचनाओं का समर्थन कर सकता है - https://www.w3.org/TR/wai-aria-1.1/#grid # 217 के रूप में अभी भी हमारे लिए एक मुद्दा है। जहाँ तक मैं संस्करण 2 के लिए आपके प्रस्ताव को बता सकता हूँ अभी नहीं।

MarkFalconbridge 4 फ़र॰ 2020

👍1

@mjurkowski @bvaughn yarn add react-window@next 1.6.0-alpha.1 स्थापित करता है। डायनामिक सूची सैंडबॉक्स उदाहरण को चलाने की कोशिश करते समय उदाहरण https://react-window-next.now/sh/#/examples/list/dynamic -size यह Error importing GitHub repository: Could not find package.json फेंकता है

mdegrees 4 फ़र॰ 2020

👍1

कैसे के बारे में index ग्रिड में भी गुजर रहा है - जबकि यह ?:

phaistonian 13 फ़र॰ 2020

हमारे आवेदन के हिस्से को चर चौड़ाई वाले कॉलम हेडर के साथ ग्रिड की आवश्यकता होती है। हमने एक क्षैतिज चर आकार सूची का उपयोग करके एक ग्रिड के साथ युग्मित और दो की स्क्रॉलिंग को सिंक्रनाइज़ करके हासिल किया है।

क्षैतिज सूचियों को हटाने से हम उस UI को बनाने से रोकेंगे (या कम से कम हमें इसे 2 ग्रिड का उपयोग करने के लिए फिर से लिखना होगा जहां कॉलम हेडर ग्रिड में एक पंक्ति है।

MarkFalconbridge 27 फ़र॰ 2020

अगला उत्पाद अद्भुत लग रहा है। लेकिन मुझे क्षैतिज और ऊर्ध्वाधर दोनों की आवश्यकता है, इसलिए FYI करें मैंने अपना स्वयं का बनाया: https://www.npmjs.com/package/react-infinite-grid-scroller। ग्रिड लेआउट, प्रतिक्रिया हुक, IntersectionObserver, और requestIdleCallback का उपयोग करता है।

प्रतिक्रिया का स्वागत करते हैं।

HenrikBechmann 9 अप्रैल 2020

मुझे लगता है कि चिपचिपा तत्वों का समर्थन प्रतिक्रिया-खिड़की के लिए एक बढ़िया अतिरिक्त होगा। यह एक बहुत ही सामान्य उपयोग का मामला है और सूची और ग्रिड दोनों के लिए लागू करने के लिए सीधे आगे होगा।

एपीआई इस तरह दिख सकता है:

<Grid
    // First 2 columns are sticky
    stickyLeft={2}
    // Last column is not sticky (default value)
    stickyRight={0}
    // First and last rows are sticky
    stickyTop={1}
    stickyBottom={1}
/>

चिपचिपाहट काम करने के लिए दो प्रमुख तत्व हैं:

केवल उन्मुक्त कोशिकाएँ जो चिपचिपी हैं यदि वे धुरी में खिड़की से बाहर हैं तो वे चिपचिपी नहीं हैं
position: sticky बजाय absolute उपयोग करें, और margin-x बजाय left और top उस अक्ष के लिए करें जो चिपचिपा नहीं है

इतनी बड़ी सुविधा की लागत उचित लगती है:

पदचिह्न न्यूनतम है
प्रदर्शन पर कोई बड़ा प्रभाव नहीं (बस कुछ अतिरिक्त पंक्तियों / स्तंभों का प्रतिपादन)
ब्राउज़र का समर्थन बहुत अच्छा है, और जो position: sticky समर्थन नहीं करते हैं वे केवल एक सामान्य संस्करण देखते हैं

अगर आपको लगता है कि यह उपयोग का मामला है के रूप में समर्थित होने के लिए बहुत विशिष्ट है, तो एक महान समझौता केवल बिंदु 1 का समर्थन करना होगा। यह निर्दिष्ट करने में सक्षम होना चाहिए कि एक सेल प्रदान किया जाना चाहिए या नहीं, यह आसानी से चिपचिपाहट को लागू करने की अनुमति देगा।

जरूरत पड़ने पर मुझे खुशी होगी।

nick-keller 22 जुल॰ 2020

स्वचालित रूप से उनके आकार को मापने और अद्यतन करने का समर्थन नहीं करता है।

मुझे ऐसा लगता है कि यह बहुत बड़ा डाउन साइड है। मेरे द्वारा लिखे गए लगभग हर ग्रिड के लिए मुझे 3 या 4 निश्चित चौड़ाई वाले कॉलम (स्टेटस लेबल के लिए, कुछ मेटा डेटा, एक्शन आदि के लिए कॉल) और 1 डायनेमिक चौड़ाई कॉलम की आवश्यकता होती है, जो बाकी स्पेस को लेता है।

मैं सराहना करता हूं कि "समर्थन नहीं करता है" जरूरी नहीं है कि यह अतिरिक्त कोड और घटकों जैसे ऑटोसाइज़र के साथ संभव नहीं होगा - यह अच्छा होगा कि उन मामलों का उपयोग अच्छी तरह से माना जाए और उन लोगों के लिए समाधान जो उन लोगों के लिए दस्तावेज हैं जिनकी आवश्यकता है डायनेमिक कॉलम लेकिन अपने साथ लाए गए सभी सामानों के लिए रिएक्ट-वर्चुअलाइज्ड नहीं जाना चाहता।

slashwhatever 28 जुल॰ 2020

यह अच्छा होगा कि उन मामलों का उपयोग अच्छी तरह से माना जाता है और समाधान उन लोगों के लिए प्रलेखित होते हैं जिन्हें एक गतिशील स्तंभ की आवश्यकता होती है

पूरी तरह से समझा जाता है- लेकिन व्यावहारिक रूप से कहा जाए तो इसके लिए बहुत प्रयास करने की आवश्यकता होती नीचे scoped v2 प्रयासों खत्म करने के लिए, अकेले कुछ भी और अधिक आक्रामक जाने समय नहीं था। 😞

bvaughn 28 जुल॰ 2020

👍3

यह अच्छा होगा कि उन मामलों का उपयोग अच्छी तरह से माना जाता है और समाधान उन लोगों के लिए प्रलेखित होते हैं जिन्हें एक गतिशील स्तंभ की आवश्यकता होती है
पूरी तरह से समझा जाता है- लेकिन व्यावहारिक रूप से कहा जाए तो इसके लिए बहुत प्रयास करने की आवश्यकता होती

हां। मैं समझ गया। उम्मीद है कि इस तरह के प्रयासों का नेतृत्व समुदाय कर सकता है।

slashwhatever 28 जुल॰ 2020

अच्छा होगा- लेकिन मेरे अनुभव में, ऐसा कभी नहीं होता: मुस्कान:

bvaughn 28 जुल॰ 2020

👀1 👍1

मैं डायनेमिकलाइज़्डलिस्ट के साथ WindowScroller का उपयोग करने में असमर्थ रहा हूं, शायद इसीलिए कि समय-समय पर रेंडर करने से स्क्रॉलटेल बहुत अच्छा काम नहीं करता है। क्या नए संस्करण के साथ यह संभव होगा?

tastyqbit 7 अक्तू॰ 2020

मैंने इस तथ्य को स्वीकार किया है कि इस प्रयास को पूरा करने के लिए मेरे पास समय या ऊर्जा नहीं है। अगर कोई भी मेरे द्वारा शुरू की गई शाखा को समाप्त करना और समाप्त करना चाहेगा, तो मैं आपकी मदद का स्वागत करता हूँ। (कृपया List और Grid पर विवरण के लिए समस्या # 6 भी देखें, समय-समय पर माप का समर्थन करने के लिए लागू किया जाना चाहिए।)

bvaughn 4 दिस॰ 2020

❤11 👍4

हाय @ बीवॉन ,
मैंने अपने कांटे पर कुछ यादृच्छिक नोटों के साथ एक चर्चा बनाई है।
मुझे बताएं कि क्या ऐसा कुछ है जो सूची में नहीं होना चाहिए या जो सही नहीं है। जब मैं प्रगति करूंगा तो सूची पूरी करूंगा।

pfongkye 14 दिस॰ 2020

👍1

अच्छी चीज लगती है

bvaughn 14 दिस॰ 2020

❤1

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

React-window: संस्करण 2 परिवर्तन

विषयसूची:

* अन्य परिवर्तन / deprecations

कम घटक

रेंडर प्रॉप्स

कोई और अधिक क्षैतिज सूची का समर्थन नहीं

RTL सपोर्ट

onItemsRendered और onScroll कॉलबैक परिवर्तन

अन्य रंगमंच की सामग्री / परिवर्तन

सबसे उपयोगी टिप्पणी

सभी 44 टिप्पणियाँ

संबंधित मुद्दों

`onItemsRendered` और `onScroll` कॉलबैक परिवर्तन