react / react/react-native

VirtualizedList- inefficient function passing for CellRenderer

Offen
#20,174 12 Kommentare 7 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bug Component: VirtualizedList Help Wanted :octocat: JavaScript Newer Patch Available Resolution: PR Submitted
Vorherrschende Sprache
C++
Sterne
127k
Forks
25.3k
Ø Merge
1 T. 23 Std.
Gemergte PRs (30 T.)
4

Beschreibung

  • Review the documentation
  • Search for existing issues
  • Use the latest React Native release - using version 0.55.2 did not see any changes to the FlatListComponent since that version.

Environment

Run react-native info in your terminal and paste its contents here.

Environment:
  OS: Windows 10
  Node: 8.11.1
  Yarn: 0.21.3
  npm: 5.8.0
  Watchman: Not Found
  Xcode: N/A
  Android Studio: Version  3.0.0.0 AI-171.4408382

Packages: (wanted => installed)
  react: 16.3.1 => 16.3.1
  react-native: ^0.55.2 => 0.55.4

Description

I used the npm package why-did-you-update to help optimize my components and prevent re-renders. However there is a re-render that I cannot control. This happens for every item in the list. My gues

CellRenderer.props: Changes are in functions only. Possibly avoidable re-render?
Functions before: {onLayout: ƒ}
Functions after: {onLayout: ƒ}

It seems this is caused by an anonymous function at https://github.com/facebook/react-native/blob/d756d94b3a7e2812f17f549c57767ac63734b49c/Libraries/Lists/VirtualizedList.js#L691

I propose that this function be defined on the class to prevent unnecessary re-renders.

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Der gemeldete Callback befindet sich in Libraries/Lists/VirtualizedList.js in der verlinkten Zeile. Beginne dort und verwende why-did-you-update mit dem beschriebenen FlatList- und CellRenderer-Fall, um zu überprüfen, ob das ausschließlich durch die Funktion verursachte erneute Rendern vermeidbar ist. Als erledigt gilt die Aufgabe, wenn der Callback diese unnötigen erneuten CellRenderer-Renderings nicht mehr verursacht, ohne das Listenverhalten zu ändern.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript, react-native
Bereich
mobile
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Klar beschrieben
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.