wake-up-neo.net

Was ist der Zweck, Funktionen wie componentWillMount in React.js zu haben?

Ich habe in letzter Zeit Komponenten in React.js geschrieben. Ich musste nie Methoden wie componentWillMount und componentDidMount verwenden.

render ist unverzichtbar. getInitialState und andere Hilfsmethoden, die ich geschrieben habe, sind ebenfalls hilfreich. Nicht jedoch die beiden zuvor genannten Lebenszyklusmethoden.

Meine aktuelle Vermutung ist, dass sie zum Debuggen verwendet werden. Ich kann in ihnen das console.log ausführen: 

componentWillMount: function() {
  console.log('component currently mounting');
},

componentDidMount: function() {
  console.log('component has mounted');
} 

Gibt es noch andere Verwendungen?

22

componentDidMount ist nützlich, wenn Sie einige Nicht-React-JavaScript-Plugins verwenden möchten. Zum Beispiel fehlt in React eine gute Datumsauswahl. Pickaday ist wunderschön und es funktioniert einfach aus der Box. Daher verwendet meine DateRangeInput-Komponente jetzt Pickaday für die Eingabe des Start- und Enddatums, und ich habe es wie folgt angeschlossen:

  componentDidMount: function() {
    new Pikaday({
      field: React.findDOMNode(this.refs.start),
      format: 'MM/DD/YYYY',
      onSelect: this.onChangeStart
    });

    new Pikaday({
      field: React.findDOMNode(this.refs.end),
      format: 'MM/DD/YYYY',
      onSelect: this.onChangeEnd
    });
  },

Das DOM muss gerendert werden, damit sich Pikaday daran anschließen kann, und mit dem componentDidMount-Hook können Sie sich genau an dieses Ereignis anschließen.

componentWillMount ist nützlich, wenn Sie etwas programmgesteuert ausführen möchten, bevor die Komponente aktiviert wird. Ein Beispiel in einer Codebase, an der ich gerade arbeite, ist ein Mixin, das eine Reihe von Code enthält, der ansonsten in einer Reihe verschiedener Menükomponenten enthalten wäre. componentWillMount wird verwendet, um den Status eines bestimmten gemeinsam genutzten Attributs festzulegen. Eine andere Möglichkeit, componentWillMount zu verwenden, besteht darin, ein Verhalten der Komponentenverzweigung durch Eigenschaften festzulegen:

  componentWillMount() {
    let mode;
    if (this.props.age > 70) {
      mode = 'old';
    } else if (this.props.age < 18) {
      mode = 'young';
    } else {
      mode = 'middle';
    }
    this.setState({ mode });
  }
24
Cymen

componentDidMount wird nur einmal und auf der Clientseite ausgeführt. Dies ist besonders wichtig, wenn Sie eine isomorphe App schreiben (läuft sowohl auf dem Client als auch auf dem Server). Sie können componentDidMount verwenden, um Aufgaben auszuführen, die Zugriff auf das Fenster oder das DOM erfordern.

Von der Facebook-Reaktionsseite 

If you want to integrate with other JavaScript frameworks, set timers using setTimeout or setInterval, or send AJAX requests, perform those operations in this method.

componentWillMount hat weniger Anwendungsfälle (ich verwende es nicht wirklich), unterscheidet sich jedoch dadurch, dass es sowohl auf Client- als auch auf Serverseite ausgeführt wird. Wahrscheinlich möchten Sie keine Ereignis-Listener oder DOM-Manipulationen hier ablegen, da sie ohne Grund versuchen, auf dem Server zu laufen.

4
Jon

In meinem Projekt, das ein Dashboard-Tool ist, habe ich componentDidMount () verwendet.

Auf der Startseite werden zuvor gespeicherte Dashboards in der Seitenleiste angezeigt. Ich mache einen Ajax-Aufruf in ComponentDidMount () von Component Rendering Homepage, um die Liste der Dashboards asynchron abzurufen, nachdem die Seite gerendert wurde.

0
Shubham Séthi

Dies ist ein Beispiel einer isomorphen Webanwendung, die componentWillMount verwendet: https://github.com/coodoo/react-redux-isomorphic-example

Ich bin jedoch zu 99% sicher, dass der Code innerhalb von componentWillMount ohne Grund auf der Serverseite ausgeführt wird (ich denke, die Verwendung von componentDidMount, um sicherzustellen, dass nur die Ausführung auf dem Client ausgeführt wurde, hätte mehr Sinn gemacht), da der Code, der die Abrufversprechen gewährleistet erfüllt, bevor die Seite in server.js gerendert wird und sich nicht in den einzelnen Komponenten befindet.

Zum asynchronen Abruf pro Komponente wird hier diskutiert: https://github.com/facebook/react/issues/1739 Soweit ich das beurteilen kann, gibt es keinen guten Anwendungsfall für componentWillMount, soweit es um Isomorphismus geht ist zumindest besorgt.

0
dpwrussell