Was macht Bind (this) im Konstruktor tun in ReactJS

Question

Ich bin vertraut mit Javascript-Funktion Bindung. Aber ich verstehe nicht, warum im folgenden React.js Snippet dieses wieder an dieses bindet. Hat es etwas gemeinsam mit Konstruktor, weil dieser im Konstruktor kann unterschiedliche Werte abhängig von der Verwendung haben?

Vielen Dank im Voraus für die Antworten

class QuotesLibrary extends React.Component { 
    constructor(props) { 
    super(props); 
    this.search = debounce(this.search.bind(this), 300); 
    } 
    search(searchTerm) { 
    this.props.relay.setVariables({searchTerm}); 
    } 
    render() { 
    return (
     <div className="quotes-library"> 
     <SearchForm searchAction={this.search} /> 
     <div className="quotes-list"> 
      {this.props.library.quotesConnection.edges.map(edge => 
      <Quote key={edge.node.id} quote={edge.node} /> 
     )} 
     </div> 
     </div> 
    ) 
    } 
} 

Answer 1

Was this.search.bind(this) tut es, dass sie den Schlüssel this innen auf die Funktion auf den Kontext Ihrer Reagieren Komponente ist verbindlich und es im Grunde, was bedeutet, dass, wenn Sie versuchen, eine Eigenschaft des React Component zuzugreifen, können Sie zugreifen es wie this.props seit this wird dann auf den Kontext der React-Komponente und nicht die Funktion selbst beziehen.

Die Bedeutung von this.search vor bind ist, dass es die Funktion search zuzugreifen versucht, die in den context der React Component ist und daher sind Sie nur einmal verbindlich und nicht zweimal.

Ich hoffe, ich in der Lage war, die Situation zu erklären, richtig

Answer 2

Warum Sie "wieder" sagen? Sie binden es nur einmal, nicht zweimal.

Entprellen von _underscores Bibliothek nimmt eine Funktion und gibt eine andere zurück, daher um den this Kontext in der Suchfunktion zu erhalten, müssen Sie es an die search binden.

Es ist genau das gleiche wie Bindungsfunktionen normalerweise im Konstruktor.

Answer 3

Sie sollten Function.bind (this) nicht verwenden: Sie sollten die Pfeilfunktion verwenden. Arrow-Funktionen sind an die Klasse (also an die Komponente) gebunden.

class QuotesLibrary extends React.Component { 
    constructor(props) { 
    super(props); 
    this.search = debounce(this.search, 300); 
    } 

    search = (searchTerm) => { 
    this.props.relay.setVariables({searchTerm}); 
    } 

    render() { 
    return (
     <div className="quotes-library"> 
     <SearchForm searchAction={this.search} /> 
     <div className="quotes-list"> 
      {this.props.library.quotesConnection.edges.map(edge => 
      <Quote key={edge.node.id} quote={edge.node} /> 
     )} 
     </div> 
     </div> 
    ) 
    } 
} 

Answer 4

Hier ist ein Beispiel dafür, wie die Differenz funktioniert -

Wie Sie sehen können, wird der erste Anruf log ‚undefined‘ und der zweite wird log 'Bar', weil der erste Aufruf nicht gebunden war, und Aufrufe von Funktionen indirekt (als Versprechen Ergebnisse oder als Callbacks) behält nicht den Verweis auf this, wenn es ausgeführt wird - bind sagt, was es this bezieht sich auf.

function debounce(fn, to) { 
 
    setTimeout(fn) 
 
} 
 

 
class Foo { 
 
    constructor() { 
 
    this.fullName = 'Bar' 
 
    } 
 
    
 
    speak() { 
 
    console.log("My name is", this.fullName) 
 
    } 
 
    
 
    test() { 
 
    debounce(this.speak, 1000) // undefined 
 
    debounce(this.speak.bind(this), 2000) // "Bar" 
 
    
 
    } 
 
} 
 

 
let foo = new Foo() 
 

 
foo.test()