React-Komponenten vergleichen Requisiten mit Objektreferenzgleichheit, und wenn Sie eine Funktion teilweise anwenden, erhalten Sie eine neue Funktion mit einer anderen Referenz, die bewirkt, dass eine reaktive Komponente jedes Mal ein erneutes Rendering auslöst.
Hat jemand mit diesem Problem konfrontiert?
Ich habe eine Funktion, die eine Komponente auf einer bestimmten Registerkarte darstellt. Und eine der Requisiten ist this.setTab.bind(this, tab) , die jedes Mal eine neue Funktion zurückgibt. Es wäre wirklich cool, wenn es einen Helfer für die Unveränderlichkeit gäbe, der es erlaubt, basierend auf dem gebundenen Wert gleich zu sein ...
Ich ziehe das direkt aus dem eslint-Plugin docs " jsx-no-bind " und es gibt eine mögliche Lösung, um die Anzahl zu reduzieren:
Ein häufiger Anwendungsfall von bind in render ist beim Rendern einer Liste ein separater Callback pro Listenelement:
%Vor%Anstatt es auf diese Weise zu tun, ziehen Sie den wiederholten Abschnitt in eine eigene Komponente:
%Vor%Dadurch wird das Rendern beschleunigt, da bei jedem Rendern keine neuen Funktionen (über Bind-Aufrufe) erstellt werden müssen.
Wenn Ihre Funktion render nur Daten von this.props und this.state auf only verwendet, können Sie das shouldComponentUpdate method um alte und neue Requisiten zu vergleichen und so React anzugeben, wenn sich der Handler nicht geändert hat, um diese unnötigen Reprints zu vermeiden.
Bedenken Sie dies jedoch: Wenn Ihre Logik in shouldComponentUpdate falsch ist (also false zurückgibt, wenn sich tatsächlich etwas geändert hat), wird Ihre Komponente nicht mehr aktualisiert. Diese Bugs sind schwer zu finden, also Vorsicht. (Verwenden Sie den Profiler, um herauszufinden, ob Sie diesen spezifischen Leistungsgewinn wirklich benötigen.)
Tags und Links reactjs