ReactJS korrekte Art, eine API zu rufen

Question

Ich bin neu zu ReactJS. Kann mir jemand vorschlagen, welcher der richtige Weg ist, um einen AJAX-Anruf zu tätigen? Derzeit bin ich mit

this.serverRequest = $.get(this.props.source, function (result) { 
     console.log("after serverRequest");   
    }.bind(this)); 

Aber ich sah mir viele Proben im Tutorial

componentDidMount: function() { 
    $.ajax({ 
     url: this.props.url, 
     dataType: 'json', 
     cache: false, 
     success: function(data) { 
     this.setState({data: data}); 
     }.bind(this), 
     error: function(xhr, status, err) { 
     console.error(this.props.url, status, err.toString()); 
     }.bind(this) 
    }); 
    }, 

Bitte legen nahe, was der richtige Weg ist und warum?

Answer 1

Wenn Ihre Komponente AJAX-Anforderungen selbst verwaltet, ist componentDidMount die richtige Lebenszyklusmethode, um dies zu tun. componentDidMount wird einmal und nur einmal im Lebenszyklus einer Komponente aufgerufen, wenn sie in das DOM eingefügt wird. Trotzdem können Sie die Logik in einem separaten Verfahren ausklammern:

componentDidMount() { 
    this._serverRequest(); 
} 

_serverRequest() { 
    /* your AJAX code here */ 
} 

ich eine _ vor dem Methodennamen seiner privaten Sichtbarkeits auszudrücken gesetzt worden. Obwohl in JS keine Methodensichtbarkeit unterstützt wird, ist eine _ eine Konvention, um eine Methode als etwas zu markieren, das Sie nicht von außen aufrufen sollten. Für eine React Komponente ist die einzige öffentliche API, die den Konsumenten zugänglich sein soll, eine Menge von props.

Eine wichtige Sache zu beachten: Wenn Ihre Komponente abgehängt ist, z. Vor dem Zurückkehren Ihrer Ajax-Anfrage aus dem DOM erhalten Sie einen Fehler, da Sie versuchen, setState() für eine Komponente, die nicht mehr da ist. Obwohl es einige Sicherheitschecks gibt, die Sie tun können, um dies zu verhindern, ist es in der Regel ein Muster, das nicht empfohlen wird. Sie sollten versuchen, alle Ihre AJAX-Anforderungen auf einer höheren Komponentenebene zu verwalten, die niemals im Anwendungslebenszyklus entfernt werden soll. Wenn Sie darauf bestehen, Ajax-fähige Komponenten auf niedrigerer Ebene zu verwenden (z. B. eine intelligente Version mit serverseitiger Suche), empfiehlt es sich, sie mit style={{display: 'none'}} zu verbergen, wenn sie nicht benötigt werden, anstatt sie aus dem DOM zu entfernen. Dies vermeidet nicht nur solche Ajax-bezogenen Fehler, sondern auch alle unnötigen doppelten Ajax-Anfragen (wie componentDidMount würde jedes Mal aufgerufen werden, wenn die Komponente neu in das DOM eingefügt wird).

Aber in einer realen Anwendung ist es normalerweise besser, alle Ihre Geschäftslogik und all Ihre serverseitige Kommunikation außerhalb Ihrer Komponenten zu halten. Verwenden Sie React rein zum Rendern und verwenden Sie ein Framework oder Entwurfsmuster wie redux oder flux zum Verwalten des Anwendungsstatus.