warum brauchen Sie, um zu binden, eine Funktion in einen Konstruktor

Ich habe eine Frage relavent zu diesem code: https://github.com/reactjs/redux/blob/master/examples/async/containers/App.js

speziell:

  constructor(props) {
    super(props)
    this.handleChange = this.handleChange.bind(this)
    this.handleRefreshClick = this.handleRefreshClick.bind(this)
  }

Ich denke, es ist eine 2-teilige Frage.

Warum ich brauche, um mit Veränderungen umzugehen, als eine Instanz der Klasse this.handleChange =, kann ich nicht einfach mit statischen Funktionen für handleChange und rufen Sie Sie direkt mit in die Klasse onClick={handleRefreshClick}> ?
Ich habe keine Ahnung, was ist denn hier Los: this.handleRefreshClick.bind(this)

Dank

Mögliche Duplikate von die Verwendung von JavaScript 'bind' - Methode
nicht genau, ich habe nicht ganz verstehen, im Kontext einer Klasse, besonders Nummer 2
Es ändert nicht den Sinn des bind. Verwenden Sie bind zu halten den Umfang der this. In den Kontext reagieren, diese können Sie aufrufen, Dinge wie this.setState etc.

InformationsquelleAutor Saad | 2016-07-12

reactjs redux

39

Beantwortet in umgekehrter Reihenfolge...
1. this.handleRefreshClick.bind(something) gibt eine neue Funktion, in der die Verweise auf this beziehen sich auf something. Dies ist eine Möglichkeit zum speichern des aktuellen Wertes des this, die sich in dem Bereich während des Aufrufs des Konstruktors, so dass Sie später verwendet werden können, wenn die Funktion aufgerufen wird.
1. Wenn Sie Ihre Funktionen nicht benötigen Zugriff auf den Zustand der Komponente, dann sind Sie sicher, dass Sie nicht brauchen, um Sie zu binden.
Das argument für das hinzufügen der folgenden Zeilen an den Konstruktor so, dass die neuen gebundenen Funktionen werden nur einmal pro Instanz der Klasse. Sie können auch
```
onClick={this.handleRefreshClick.bind(this)}
```
oder (ES6):
```
onClick={() => this.handleRefreshClick()}
```
aber jede dieser Methoden erstellen Sie eine neue Funktion jedes mal, wenn die Komponente neu gerendert.
- aber tut .bind(this), die ganze Idee einer Klasse ist, dass es kapselt 'sich dieses' Recht, also warum brauche ich zum einkapseln der Rahmen in einer bestimmten Funktion, wenn die gesamte Instanz einer Klasse zu Kapseln, der Umfang
- nicht in JS! Klassen sind wirklich nur Lust Funktionen; Sie tun nichts, besonders nützlich, mit this.
- Es ist nicht gut, zu binden, oder verwenden Sie die Pfeiltasten Funktion Render, wie es führt zu einer Neuzuweisung der Funktion bei jedem Rendern. Der bessere Ansatz ist, zu binden, im Konstruktor, oder verwenden Sie die Pfeiltasten Funktionen in der Klasse. medium.freecodecamp.org/...
- Yep, das ist, was es sagt, in meiner Antwort 🙂
- Ich glaube, diese Antwort könnte verbessert werden, indem geklärt wird, dass dies nur relevant ist ReactJS und unter normalen Umständen besteht keine Notwendigkeit zu binden Funktionen this (in regelmäßigen JS-Klassen)
- im Gegenteil, ich würde' t sagen, dass es viel in dieser Antwort, die ist Reagieren-spezifisch. Jede Klasse, die Methoden verwendet, die in event-Handlern immer brauchen this gebunden werden, wenn Sie auf die Eigenschaften zugreifen, auf die Instanz.
- Hallo, im neu zu reagieren und javascript im Allgemeinen, ich habe gelesen, dass, wenn Sie eine Funktion hinzufügen zu einer Klasse wird es befestigt, um es für den Prototyp. So wird es nicht in der Lage, die auf die Funktion verweisen this.handleClick durch die Suche durch die Prototyp-Kette im Fall von Klassen Reagieren ? Ich Verstand nicht, den letzten Punkt, Sie erklärt @user1970395, Werden Sie sagen, da der event-handler ist eine Funktion selbst this in dieser Funktion beziehen sich auf den event-handlers this?
- Ich sage, dass, es sei denn, Sie explizit zu binden this um eine Funktion, deren Wert hängt von dem Kontext ab, in dem es aufgerufen wird. Reagieren, verwendet die render-Funktion zum erstellen von DOM-Elementen mit event-Handlern. Aus dem Kontext, in dem diese Ereignisse werden behandelt, es gibt keine Kenntnis der Klasse, die diese event-Handler gehören, es sei denn, Sie binden Sie es.
InformationsquelleAutor Tom Fenech
2

Diese 2 Funktionen handleChange und handleRefreshClick weitergegeben werden als Requisiten, um andere Komponenten ,

Sind Sie binden sich an diese, denn wenn die Kind-Komponente wird ein Aufruf dieser Funktionen werden Sie immer ausführen, mit dem APP-Kontext.

Können Sie entfernen diese Funktionen von der Klasse, aber immer noch Sie zu binden, müssen diese da, würden Sie die Aktualisierung werden einige Teile der APP

InformationsquelleAutor Piyush.kapoor
2

Der Grund, warum es getan wird, ist das binden der this Schlüsselwort für das Objekt. Wie Tom sagte, aufrufen einer Funktion aus einer Klasse, bedeutet nicht, es wird aufgerufen mit dem Kontext des Objekts, das erstellt, die Funktion.

Ich denke, dass Sie vielleicht verwirrt, weil in der Reagieren, Beispiele/tutorials, mit Reagieren.createClass() HAT binden this automatisch für Sie. So werden Sie sich vielleicht Fragen, warum Reagieren.createClass() funktioniert es, aber nicht mit ES6-Klasse syntax.

Dies ist, da Reagieren wollte nicht Durcheinander mit ES6-Spezifikationen (verbindliche this auf Funktionen aus seiner Klasse nicht in der ES6-Klasse-Skillung), aber zur gleichen Zeit geben wollte, seinen Nutzern die Bequemlichkeit der ES6-Klasse syntax. Lesen Sie mehr dazu unten.

Github issue

Hoffentlich wirft etwas Licht auf, warum das geschieht.

InformationsquelleAutor julianljk
0

Ich persönlich bind-Funktionen im Konstruktor, so dass Ihre Referenzen nicht ändern, auf jeden re-Rendern.

Dies ist besonders wichtig, wenn Sie auf der Durchreise sind Funktionen zum Lesen, nur Kinder, dass Sie nicht brauchen, um aktualisiert zu werden, wenn Ihre Requisiten nicht ändern. Ich benutze reagieren-addons-rein-Rendern-mixin für, die.

Sonst, auf jeden Elternteils re-Rendern, die Bindung wird passieren, neue Funktions-Referenz wird erstellt und an die Kinder, die denken, die Requisiten haben sich geändert.

InformationsquelleAutor Anton Kuzmin
0

this hängt davon ab, wie die Funktion aufgerufen wird, nicht, wie/wo es erstellt wird.

Wenn du Blick auf den code werfen, sehen Sie zwei "dies", warum? Scheint seltsam, oder?
Die Sache ist es ist nicht, wie es scheint. Es geht darum, wie es genannt wird.

Sind Sie im Grunde sagen. Hey, wenn jemand Anrufe, die Sie daran erinnern this bedeutet, dass diese Klasse. nicht etwas anderes.

Wenn jemand ruft die Klasse wie: x.yourClass() Sie sagen this ist nicht x aber die Klasse selbst(mit Requisiten und Staaten etc.).

InformationsquelleAutor serkan

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.