Ich bin dabei, eine React-Komponente auf ES6 zu aktualisieren und erlitt das in dieser Frage beschriebene Problem - Zugriff auf React instance (this) innerhalb des Ereignishandlers nicht möglich - d. h. keine Bindung an die Komponenteninstanz.
Das hat Sinn gemacht und natürlich funktioniert, aber ich bin verwirrt über den anderen Teil der Antwort:
Beachten Sie, dass das Binden einer Funktion eine neue Funktion erzeugt. Sie können Entweder bind es direkt in render, was bedeutet, dass eine neue Funktion sein wird erstellt jedes Mal, wenn die Komponente rendert, oder binden Sie es in Ihrem Konstruktor, der nur einmal auslöst.
%Vor%vs
%Vor%
Ich gehe davon aus, dass die Bindung im Konstruktor der bevorzugte Ansatz für Leistung usw. ist, aber Sie wissen, was sie über annehmen sagen!
Was sind die Kompromisse für diese beiden Ansätze? Gibt es jemals eine Situation, in der man definitiv besser ist als die andere? Oder spielt es keine Rolle?
Nachteil der Bindung im Konstruktor: react hot loader funktioniert nicht.
Nachteil der Bindung in render (): Leistung.
Kürzlich habe ich das gemacht. Es ist etwas schneller als das Binden in Render, aber ich bin bereit, die Leistung gegen Flexibilität und mein begehrtes HMR einzutauschen.
%Vor%Es gibt zum Beispiel etwas mehr Flexibilität und einen leichteren Übergang zum kanonischen Eingangsatom.
%Vor%Oder fügen Sie Argumente hinzu, wo Sie sie haben wollen:
%Vor% Ich denke, alles, was Sie verstehen müssen, ist Function.prototype.bind() gibt eine neue Funktion zurück. Sie werden also jedes Mal eine Kreation erstellen, indem Sie die Bindungsaktion in der Methode render() ausführen. Die Wahrscheinlichkeit, dass die Methode render() mehrmals aufgerufen wird, ist wirklich hoch.
Wenn Sie das im Konstruktor tun, bedeutet das, dass Sie nur einmal binden und so oft Sie wollen. Auch wenn die Methode render() mehrere Male aufgerufen wird, wird dieselbe Funktion verwendet, die mit einem anderen gebundenen Kontext erstellt wurde.
Ja, idealerweise sollten Sie im Konstruktor binden. Erinnert mich an ein Stück Code (prüfe den Konstrukteur) Ich war vor ein paar Wochen zurück.
Ich denke, Sie haben die Hauptprobleme im Zusammenhang mit der Neuerstellung von Funktionen angesprochen. Ich möchte eine andere Option mit Pfeilfunktionen und Eigenschaftsinitialisierungen hervorheben. Die Pfeilfunktionen übernehmen in diesem Fall automatisch das lokale this .
z.B.
%Vor%Sie können hier mehr darüber lesen: Ссылка
Wenn Sie viele Funktionen haben, die Sie binden möchten, ist dies möglicherweise eine bessere Lösung. Sie verlieren jedoch die Reinheit, indem Sie nur eine Standardfunktionsdeklaration verwenden.
Tags und Links javascript reactjs this