React-native: ارتباك حول عرض "rowHasChanged" وعرض ListView

تم إنشاؤها على ٤ فبراير ٢٠١٦ · 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.

يبدو أنه من المهم الاستنساخ من مثيل DataSource الصحيح ؛)

لذلك يجب أن يكون الكود من الجوهر:

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

يبدو هذا كخطأ يتسلل بسهولة إلى قاعدة بياناتك. أتساءل عما إذا كان يجب التأكيد بشكل أكبر على الاستخدام الصحيح لـ DataSource في الوثائق.

janmonschke في ٤ فبراير ٢٠١٦

👍8

ال 3 كومينتر

مرحبًا janmonschke ، شكرًا للإبلاغ عن هذه المشكلة!

إن React Native ، كما سمعت على الأرجح ، تزداد شعبية حقًا والحقيقة هي أننا نشعر بالإرهاق قليلاً من النشاط المحيط بها. هناك الكثير من المشكلات التي يتعين علينا التعامل معها بشكل صحيح.

إذا كنت لا تعرف كيفية القيام بشيء ما أو أن شيئًا ما لا يعمل كما تتوقع ولكنك غير متأكد من أنه خطأ ، فالرجاء طرح سؤال على StackOverflow بالعلامة react-native أو لمزيد من التفاعلات في الوقت الفعلي ، اسأل على Discord في # قناة رد فعل أصلية.
إذا كان هذا طلب ميزة أو خطأ ترغب في إصلاحه ، فيرجى الإبلاغ عنه في " مشاكل المنتج" . يحتوي على ميزة التصنيف التي تتيح لنا التركيز على أهم المشكلات التي يواجهها المجتمع.
نرحب بالقضايا الواضحة والعلاقات العامة الجاهزة للمناقشة المتعمقة. يُرجى تقديم لقطات شاشة عند الاقتضاء وذكر دائمًا إصدار React Native الذي تستخدمه. شكرا لمساهماتكم!

facebook-github-bot في ٤ فبراير ٢٠١٦

حسنًا ، وجدت الحل في: http://stackoverflow.com/a/33871118.

يبدو أنه من المهم الاستنساخ من مثيل DataSource الصحيح ؛)

لذلك يجب أن يكون الكود من الجوهر:

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

janmonschke في ٤ فبراير ٢٠١٦

👍8

شكرا janmonschke! أوافق على أنه كان لدي مجموعة من المشاهدات يتم إعادة عرضها باستمرار ولم أستطع معرفة سبب حدوث ذلك ولماذا لم يتم استدعاء الوظيفة rowHasChanged مطلقًا. 👊