React-native: `rowHasChanged` और ListView रेंडरिंग के बारे में भ्रम

को निर्मित 4 फ़र॰ 2016 · 3टिप्पणियाँ · स्रोत: facebook/react-native

सभी को प्रणाम,

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

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

मैंने एक सरल उदाहरण बनाया जो दिखाता है कि हम सूची में आइटम कैसे जोड़ रहे हैं: https://gist.github.com/janmonschke/c9c84b6050683da0c64f

हम मूल रूप से क्या करते हैं:

constructor() {
  // (...)
  this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => {
    console.log('rowHasChanged');
    return r1 !== r2;
  }});
  // (...)
}

onEndReached = () => {
  // append data to the end
  setData = [...setData, ...genRandomSet()];
  this.setState({
    dataSource: this.ds.cloneWithRows(setData)
  });
  console.log('onEndReached');
};

render() {
  return (
    <ListView
      dataSource={this.state.dataSource}
      renderRow={this.renderRow}
      onEndReached={this.onEndReached}
    />
  );
}

लेकिन rowHasChanged कभी लॉग इन नहीं होता है।

क्या मैं इसे किसी तरह गलत तरीके से इस्तेमाल कर रहा हूं? क्या ListView में शामिल होने के बेहतर तरीके हैं?

0.18.0 और 0.19.0 . में समान व्यवहार

Locked

स्रोत

janmonschke

👍3 😕1

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

ठीक है, इसमें समाधान मिला: http://stackoverflow.com/a/33871118।

स्पष्ट रूप से सही डेटासोर्स इंस्टेंस से क्लोन करना महत्वपूर्ण है;)

तो जिस्ट से कोड होना चाहिए था:

  setData = [...setData, ...genRandomSet()];
  this.setState({
    dataSource: this.state.dataSource.cloneWithRows(setData)
  });

यह एक त्रुटि की तरह लगता है जो आसानी से आपके कोडबेस में घुस रही है। मुझे आश्चर्य है कि दस्तावेज़ीकरण में DataSource के सही उपयोग पर अधिक जोर दिया जाना चाहिए।

janmonschke 4 फ़र॰ 2016

👍8

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

अरे जनमोंशके, इस मुद्दे की रिपोर्ट करने के लिए धन्यवाद!

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

यदि आप नहीं जानते कि कुछ कैसे करना है या कुछ काम नहीं कर रहा है, लेकिन यह सुनिश्चित नहीं है कि यह एक बग है , तो कृपया StackOverflow पर react-native टैग के साथ पूछें या अधिक रीयल टाइम इंटरैक्शन के लिए, डिस्कॉर्ड पर पूछें #प्रतिक्रिया-मूल चैनल।
यदि यह एक सुविधा अनुरोध या एक बग है जिसे आप ठीक करना चाहते हैं, तो कृपया उत्पाद दर्द पर इसकी रिपोर्ट करें। इसमें एक रैंकिंग विशेषता है जो हमें समुदाय के सबसे महत्वपूर्ण मुद्दों पर ध्यान केंद्रित करने देती है।
हम स्पष्ट मुद्दों और पीआर का स्वागत करते हैं जो गहन चर्चा के लिए तैयार हैं। कृपया स्क्रीनशॉट प्रदान करें जहां उपयुक्त हो और हमेशा आपके द्वारा उपयोग किए जा रहे रिएक्ट नेटिव के संस्करण का उल्लेख करें। आपके योगदानों के लिए धन्यवाद!

facebook-github-bot 4 फ़र॰ 2016

ठीक है, इसमें समाधान मिला: http://stackoverflow.com/a/33871118।

स्पष्ट रूप से सही डेटासोर्स इंस्टेंस से क्लोन करना महत्वपूर्ण है;)

तो जिस्ट से कोड होना चाहिए था:

  setData = [...setData, ...genRandomSet()];
  this.setState({
    dataSource: this.state.dataSource.cloneWithRows(setData)
  });

janmonschke 4 फ़र॰ 2016

👍8

धन्यवाद @janmonschke! मैं सहमत हूं, मेरे पास लगातार पुन: प्रस्तुत करने वाले विचारों का एक समूह था और मैं यह नहीं समझ सका कि ऐसा क्यों हो रहा था और क्यों rowHasChanged फ़ंक्शन को कभी भी कॉल नहीं किया जा रहा था। मैं

ekryski 24 जून 2016

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

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

React-native: `rowHasChanged` और ListView रेंडरिंग के बारे में भ्रम

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

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

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