Code nach dem Rendern reagieren?

Ich habe eine App, in der ich die Höhe eines Elements (sagen wir "App-Inhalt") dynamisch einstellen muss. Es nimmt die Höhe des "Chroms" der App und subtrahiert sie und legt dann die Höhe des "App-Inhalts" so fest, dass sie zu 100% in diese Einschränkungen passt. Dies ist mit Vanilla JS-, jQuery- oder Backbone-Ansichten sehr einfach, aber ich habe Schwierigkeiten herauszufinden, wie der richtige Prozess dafür in React aussehen würde.

Unten finden Sie eine Beispielkomponente. Ich möchte in der Lage sein, die app-contentHöhe des Fensters auf 100% des Fensters abzüglich der Größe des ActionBarund einzustellen BalanceBar, aber woher weiß ich, wann alles gerendert wird und wo ich das Berechnungsmaterial in diese Reaktionsklasse einfügen würde?

/** @jsx React.DOM */
var List = require('../list');
var ActionBar = require('../action-bar');
var BalanceBar = require('../balance-bar');
var Sidebar = require('../sidebar');
var AppBase = React.createClass({
  render: function () {
    return (
      <div className="wrapper">
        <Sidebar />
        <div className="inner-wrapper">
          <ActionBar title="Title Here" />
          <BalanceBar balance={balance} />
          <div className="app-content">
            <List items={items} />
          </div>
        </div>
      </div>
    );
  }
});

module.exports = AppBase;

componentDidMount ()

Diese Methode wird einmal aufgerufen, nachdem Ihre Komponente gerendert wurde. Ihr Code würde also so aussehen.

var AppBase = React.createClass({
  componentDidMount: function() {
    var $this = $(ReactDOM.findDOMNode(this));
    // set el height and width etc.
  },

  render: function () {
    return (
      <div className="wrapper">
        <Sidebar />
          <div className="inner-wrapper">
            <ActionBar title="Title Here" />
            <BalanceBar balance={balance} />
            <div className="app-content">
              <List items={items} />
          </div>
        </div>
      </div>
    );
  }
});

Ein Nachteil der Verwendung von componentDidUpdateoder componentDidMountbesteht darin, dass sie tatsächlich ausgeführt werden, bevor die dom-Elemente gezeichnet werden, aber nachdem sie von React an das DOM des Browsers übergeben wurden.

Angenommen, Sie müssen node.scrollHeight auf das gerenderte node.scrollTop setzen, dann reichen die DOM-Elemente von React möglicherweise nicht aus. Sie müssen warten, bis die Elemente fertig gestrichen sind, um ihre Höhe zu erhalten.

Lösung:

Verwenden Sie requestAnimationFramediese Option, um sicherzustellen, dass Ihr Code nach dem Malen Ihres neu gerenderten Objekts ausgeführt wird

scrollElement: function() {
  // Store a 'this' ref, and
  var _this = this;
  // wait for a paint before running scrollHeight dependent code.
  window.requestAnimationFrame(function() {
    var node = _this.getDOMNode();
    if (node !== undefined) {
      node.scrollTop = node.scrollHeight;
    }
  });
},
componentDidMount: function() {
  this.scrollElement();
},
// and or
componentDidUpdate: function() {
  this.scrollElement();
},
// and or
render: function() {
  this.scrollElement()
  return [...]

Nach meiner Erfahrung window.requestAnimationFramewar es nicht genug, um sicherzustellen, dass das DOM vollständig gerendert / reflow-vollständig von war componentDidMount. Ich habe Code ausgeführt, der unmittelbar nach einem componentDidMountAufruf auf das DOM zugreift und dessen alleinige Verwendung dazu führen window.requestAnimationFramewürde, dass das Element im DOM vorhanden ist. Aktualisierungen der Abmessungen des Elements werden jedoch noch nicht berücksichtigt, da noch kein Reflow aufgetreten ist.

Die einzig wirklich zuverlässige Möglichkeit, dies zu erreichen, bestand darin, meine Methode in a setTimeoutund a zu verpacken, window.requestAnimationFrameum sicherzustellen, dass der aktuelle Aufrufstapel von React gelöscht wird, bevor Sie sich für das Rendern des nächsten Frames registrieren.

function onNextFrame(callback) {
    setTimeout(function () {
        requestAnimationFrame(callback)
    })
}

Wenn ich darüber spekulieren müsste, warum dies auftritt / notwendig ist, könnte ich React Batching DOM-Updates sehen und die Änderungen erst nach Abschluss des aktuellen Stacks auf das DOM anwenden.

Wenn Sie DOM-Messungen in dem Code verwenden, den Sie nach den React-Rückrufen auslösen, möchten Sie wahrscheinlich diese Methode verwenden.

Um diese Frage mit den neuen Hook-Methoden ein wenig zu aktualisieren, können Sie einfach den useEffectHook verwenden:

import React, { useEffect } from 'react'

export default function App(props) {

     useEffect(() => {
         // your post layout code (or 'effect') here.
         ...
     },
     // array of variables that can trigger an update if they change. Pass an
     // an empty array if you just want to run it once after component mounted. 
     [])
}

Auch wenn Sie vor dem Layout malen möchten, verwenden Sie den useLayoutEffectHaken:

import React, { useLayoutEffect } from 'react'

export default function App(props) {

     useLayoutEffect(() => {
         // your pre layout code (or 'effect') here.
         ...
     }, [])
}

Sie können den Status ändern und dann Ihre Berechnungen im setState-Rückruf durchführen . Laut der React-Dokumentation wird "garantiert ausgelöst, nachdem das Update angewendet wurde".

Dies sollte im componentDidMountoder an einer anderen Stelle im Code (wie bei einem Ereignishandler zur Größenänderung) und nicht im Konstruktor erfolgen.

Dies ist eine gute Alternative zu window.requestAnimationFrameund es gibt nicht die Probleme, die einige Benutzer hier erwähnt haben (sie müssen mit kombiniert setTimeoutoder mehrmals aufgerufen werden). Zum Beispiel:

class AppBase extends React.Component {
    state = {
        showInProcess: false,
        size: null
    };

    componentDidMount() {
        this.setState({ showInProcess: true }, () => {
            this.setState({
                showInProcess: false,
                size: this.calculateSize()
            });
        });
    }

    render() {
        const appStyle = this.state.showInProcess ? { visibility: 'hidden' } : null;

        return (
            <div className="wrapper">
                ...
                <div className="app-content" style={appStyle}>
                    <List items={items} />
                </div>
                ...
            </div>
        );
    }
}

Ich finde, dass diese Lösung schmutzig ist, aber los geht's:

componentDidMount() {
    this.componentDidUpdate()
}

componentDidUpdate() {
    // A whole lotta functions here, fired after every render.
}

Jetzt sitze ich einfach hier und warte auf die Abstimmungen.

React verfügt nur über wenige Lebenszyklusmethoden, die in diesen Situationen hilfreich sind. Die Listen umfassen unter anderem getInitialState, getDefaultProps, componentWillMount, componentDidMount usw.

In Ihrem Fall und in den Fällen, die mit den DOM-Elementen interagieren müssen, müssen Sie warten, bis der Dom bereit ist. Verwenden Sie also componentDidMount wie folgt :

/** @jsx React.DOM */
var List = require('../list');
var ActionBar = require('../action-bar');
var BalanceBar = require('../balance-bar');
var Sidebar = require('../sidebar');
var AppBase = React.createClass({
  componentDidMount: function() {
    ReactDOM.findDOMNode(this).height = /* whatever HEIGHT */;
  },
  render: function () {
    return (
      <div className="wrapper">
        <Sidebar />
        <div className="inner-wrapper">
          <ActionBar title="Title Here" />
          <BalanceBar balance={balance} />
          <div className="app-content">
            <List items={items} />
          </div>
        </div>
      </div>
    );
  }
});

module.exports = AppBase;

Weitere Informationen zum Lebenszyklus in Reaktion finden Sie unter folgendem Link: https://facebook.github.io/react/docs/state-and-lifecycle.html

Ich bin auf das gleiche Problem gestoßen.

In den meisten Szenarien mit dem Hack-ish setTimeout(() => { }, 0)in componentDidMount()gearbeitet.

Aber nicht in einem besonderen Fall; und ich wollte das nicht verwenden, ReachDOM findDOMNodeda in der Dokumentation steht:

Hinweis: findDOMNode ist eine Escape-Schraffur, mit der auf den zugrunde liegenden DOM-Knoten zugegriffen wird. In den meisten Fällen wird von der Verwendung dieser Notluke abgeraten, da sie die Komponentenabstraktion durchdringt.

(Quelle: findDOMNode )

In dieser speziellen Komponente musste ich das componentDidUpdate()Ereignis verwenden, sodass mein Code folgendermaßen aussah:

componentDidMount() {
    // feel this a little hacky? check this: http://stackoverflow.com/questions/26556436/react-after-render-code
    setTimeout(() => {
       window.addEventListener("resize", this.updateDimensions.bind(this));
       this.updateDimensions();
    }, 0);
}

Und dann:

componentDidUpdate() {
    this.updateDimensions();
}

Schließlich musste ich in meinem Fall den Listener entfernen, der in erstellt wurde componentDidMount:

componentWillUnmount() {
    window.removeEventListener("resize", this.updateDimensions.bind(this));
}

Nach dem Rendern können Sie die Höhe wie unten angeben und die Höhe für die entsprechenden Reaktionskomponenten angeben.

render: function () {
    var style1 = {height: '100px'};
    var style2 = { height: '100px'};

   //window. height actually will get the height of the window.
   var hght = $(window).height();
   var style3 = {hght - (style1 + style2)} ;

    return (
      <div className="wrapper">
        <Sidebar />
        <div className="inner-wrapper">
          <ActionBar style={style1} title="Title Here" />
          <BalanceBar style={style2} balance={balance} />
          <div className="app-content" style={style3}>
            <List items={items} />
          </div>
        </div>
      </div>
    );`
  }

oder Sie können die Höhe jeder Reaktionskomponente mit sass angeben. Geben Sie die ersten 2 Reaktionskomponenten-Hauptdivs mit fester Breite und dann die Höhe der dritten Komponentenhauptdivs mit Auto an. Basierend auf dem Inhalt des dritten Div wird die Höhe zugewiesen.

Ich habe tatsächlich Probleme mit einem ähnlichen Verhalten. Ich rendere ein Videoelement in einer Komponente mit dem ID-Attribut. Wenn RenderDOM.render () beendet wird, wird ein Plugin geladen, das die ID benötigt, um den Platzhalter zu finden, und es kann ihn nicht finden.

Das setTimeout mit 0ms innerhalb der componentDidMount () hat es behoben :)

componentDidMount() {
    if (this.props.onDidMount instanceof Function) {
        setTimeout(() => {
            this.props.onDidMount();
        }, 0);
    }
}

Aus der Dokumentation zu ReactDOM.render () :

Wenn der optionale Rückruf bereitgestellt wird, wird er ausgeführt, nachdem die Komponente gerendert oder aktualisiert wurde.

Für mich keine Kombination von window.requestAnimationFrameodersetTimeout konsistente Ergebnisse. Manchmal funktionierte es, aber nicht immer - oder manchmal war es zu spät.

Ich habe es behoben, indem ich window.requestAnimationFrameso oft wie nötig eine Schleife gemacht habe .
(Normalerweise 0 oder 2-3 mal)

Der Schlüssel ist diff > 0: Hier können wir genau sicherstellen, wann die Seite aktualisiert wird.

// Ensure new image was loaded before scrolling
if (oldH > 0 && images.length > prevState.images.length) {
    (function scroll() {
        const newH = ref.scrollHeight;
        const diff = newH - oldH;

        if (diff > 0) {
            const newPos = top + diff;
            window.scrollTo(0, newPos);
        } else {
            window.requestAnimationFrame(scroll);
        }
    }());
}

Ich hatte eine seltsame Situation, als ich eine Reaktionskomponente drucken musste, die große Datenmengen empfängt und auf Leinwand malt. Ich habe alle genannten Ansätze ausprobiert, von denen keiner für mich zuverlässig funktioniert hat. Mit requestAnimationFrame in setTimeout erhalte ich in 20% der Fälle eine leere Leinwand, also habe ich Folgendes getan:

nRequest = n => range(0,n).reduce(
(acc,val) => () => requestAnimationFrame(acc), () => requestAnimationFrame(this.save)
);

Grundsätzlich habe ich eine Kette von requestAnimationFrames erstellt. Ich bin mir nicht sicher, ob dies eine gute Idee ist oder nicht, aber dies funktioniert bisher in 100% der Fälle für mich (ich verwende 30 als Wert für die Variable n).

Es gibt tatsächlich eine viel einfachere und sauberere Version als die Verwendung von Anforderungsanimationsrahmen oder Zeitüberschreitungen. Ich bin überrascht, dass niemand darauf eingegangen ist: der Vanilla-Js-Onload-Handler. Wenn Sie können, verwenden Sie component did mount. Wenn nicht, binden Sie einfach eine Funktion an den Onload-Hanlder der jsx-Komponente. Wenn Sie möchten, dass die Funktion jedes Rendern ausführt, führen Sie sie auch aus, bevor Sie die Ergebnisse in der Renderfunktion zurückgeben. Der Code würde so aussehen:

runAfterRender = () => 
{
  const myElem = document.getElementById("myElem")
  if(myElem)
  {
    //do important stuff
  }
}

render()
{
  this.runAfterRender()
  return (
    <div
      onLoad = {this.runAfterRender}
    >
      //more stuff
    </div>
  )
}

}}

Ein bisschen Update mit ES6Klassen stattReact.createClass

import React, { Component } from 'react';

class SomeComponent extends Component {
  constructor(props) {
    super(props);
    // this code might be called when there is no element avaliable in `document` yet (eg. initial render)
  }

  componentDidMount() {
    // this code will be always called when component is mounted in browser DOM ('after render')
  }

  render() {
    return (
      <div className="component">
        Some Content
      </div>
    );
  }
}

Überprüfen Sie auch die Methoden zum Reagieren des Komponentenlebenszyklus: Der Komponentenlebenszyklus

Jede Komponente hat viele ähnliche Methoden wie componentDidMountz.

• componentWillUnmount() - Die Komponente wird aus dem Browser-DOM entfernt