reactjs: Wie man Daten ändert und Benachrichtigung zeigt

Question

Hallo Jungs im neuen in reactjs Ich möchte nur die Reaktion Weg, Methode/Lebenszyklus, Komponente (Benachrichtigungskomponente) zu rendern, wenn Ajax Daten Ergebnis unterscheidet sich mit vorherigen Zustand?

var NewsList = React.createClass({ 
    getInitialState: function() { 
    return ({ 
     data: [], 
     showNotif: false, 
     showLoading: false 
    }); 
    }, 
    showNotification: function() { 
    return (
     <Notification msg="new data" /> 
    ); 
    }, 
    ajaxRequest: function() { 
    //do ajax request, load the result to this.state.data 
    }, 
    componentWillMount: function() { 
    this.setState({showLoading: true}); 
    }, 
    componentDidMount: function() { 
    this.ajaxRequest(); 
    setInterval(this.ajaxRequest, 2000); 
    }, 
    componentDidUpdate: function(prevProps, prevState) { 
    if (this.state.data != prevState.data) { 
     //this.setState({showNotif: !this.state.showNotif}); 
    } 
    }, 
    render: function() { 
    var loadingElement, notifElement; 
    if (this.state.showLoading) { 
     loadingElement = <Loader /> 
    } 
    if(this.state.showNotif) { 
     notifElement = this.showNotification(); 
    } 
    return (
     <div> 
     {notifElement} 
     {loadingElement} 
     <NewsItem data={this.state.data} /> 
     </div> 
    ); 
}); 

wenn Sie also kann ich erwarten, sehen die ComponentDidUpdate wird die geänderte state.data lesen und wenn sie (gemeint ist der Ajax-Ergebnis hat neue aktualisierte) geändert hat, wird es this.state.showNotif zu true gesetzt und machen wird showNotification() nennen, aber es ist nicht (es blinkt, stimmt-falsch setzt hin und her, so heißt es oft)

was soll ich tun, um es zu erreichen und es richtig zu machen?

Answer 1

Der beste Weg, dies zu tun, besteht darin, den Datenzustand nur zu aktualisieren, wenn er sich von dem vorherigen unterscheidet. Zum Beispiel:

componentDidMount(){ 
    this.ajaxRequest().done((data)=>{ 
     if(data !== this.state.data){ 
      this.setState({data: data, showNotif: true}) 
    }) 

Aber wenn Sie jedes Mal, Zustand aktualisieren möchten, und Änderungen zu überprüfen, die einen besseren Ort ist componentWillReceiveProps:

componentWillReceiveProps(nextProps, nextState) { 
    if (this.state.data != nextState.data) { 
     this.setState({showNotif: true}); 
    } 
} 

Der Unterschied besteht darin, dass, wenn Sie Datenzustand zu ändern, es Komponente Rendering verursachen Anschließend rendern Sie in componentDidUpdate die Komponente zum zweiten Mal (nächster setState). Wenn Sie componentWillReceiveProps - Component render nur einmal verwenden.