Réagir au code «après rendu»?

J'ai une application où je dois définir la hauteur d'un élément (disons "contenu de l'application") dynamiquement. Il prend la hauteur du «chrome» de l'application et la soustrait, puis définit la hauteur du «contenu de l'application» pour s'adapter à 100% à ces contraintes. C'est super simple avec les vues vanilla JS, jQuery ou Backbone, mais j'ai du mal à comprendre quel serait le bon processus pour le faire dans React?

Voici un exemple de composant. Je veux pouvoir définir app-contentla hauteur de 100% de la fenêtre moins la taille de ActionBaret BalanceBar, mais comment savoir quand tout est rendu et où dois-je placer les éléments de calcul dans cette classe React?

/** @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 ()

Cette méthode est appelée une fois après le rendu de votre composant. Votre code ressemblerait donc à cela.

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>
    );
  }
});

Un inconvénient de l'utilisation componentDidUpdate, ou componentDidMountest qu'ils sont réellement exécutés avant que les éléments dom ne soient dessinés, mais après qu'ils ont été passés de React au DOM du navigateur.

Par exemple, si vous avez besoin de définir node.scrollHeight sur le node.scrollTop rendu, les éléments DOM de React peuvent ne pas suffire. Vous devez attendre que les éléments soient peints pour obtenir leur hauteur.

Solution:

Utilisez requestAnimationFramepour vous assurer que votre code est exécuté après la peinture de votre nouvel objet rendu

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 [...]

D'après mon expérience window.requestAnimationFrame, cela ne suffisait pas à garantir que le DOM avait été entièrement rendu / refondu à partir de componentDidMount. J'ai du code en cours d'exécution qui accède au DOM immédiatement après un componentDidMountappel et l'utilisation uniquement window.requestAnimationFrameentraînerait la présence de l'élément dans le DOM; cependant, les mises à jour des dimensions de l'élément ne sont pas encore reflétées car aucune refusion n'a encore eu lieu.

Le seul moyen vraiment fiable pour que cela fonctionne était d'encapsuler ma méthode dans a setTimeoutet a window.requestAnimationFramepour s'assurer que la pile d'appels actuelle de React est effacée avant de s'inscrire pour le rendu de la prochaine image.

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

Si je devais spéculer sur la raison pour laquelle cela se produisait / était nécessaire, je pourrais voir React regrouper les mises à jour du DOM et n'appliquer les modifications au DOM qu'après la fin de la pile actuelle.

En fin de compte, si vous utilisez des mesures DOM dans le code que vous tirez après les rappels React, vous voudrez probablement utiliser cette méthode.

Juste pour mettre à jour un peu cette question avec les nouvelles méthodes de hook, vous pouvez simplement utiliser le useEffecthook:

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. 
     [])
}

De plus, si vous souhaitez exécuter avant la peinture de mise en page, utilisez le useLayoutEffectcrochet:

import React, { useLayoutEffect } from 'react'

export default function App(props) {

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

Vous pouvez modifier l'état, puis effectuer vos calculs dans le rappel setState . Selon la documentation de React, cela est "garanti de se déclencher après l'application de la mise à jour".

Cela devrait être fait dans componentDidMountou ailleurs dans le code (comme sur un gestionnaire d'événement de redimensionnement) plutôt que dans le constructeur.

Ceci est une bonne alternative à window.requestAnimationFrameet il n'a pas les problèmes que certains utilisateurs ont mentionnés ici (devant le combiner avec setTimeoutou l'appeler plusieurs fois). Par exemple:

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>
        );
    }
}

Je pense que cette solution est sale, mais c'est parti:

componentDidMount() {
    this.componentDidUpdate()
}

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

Maintenant, je vais juste m'asseoir ici et attendre les votes négatifs.

React a peu de méthodes de cycle de vie qui aident dans ces situations, les listes comprenant mais sans s'y limiter getInitialState, getDefaultProps, componentWillMount, componentDidMount etc.

Dans votre cas et les cas qui doivent interagir avec les éléments DOM, vous devez attendre que le dom soit prêt, alors utilisez componentDidMount comme ci-dessous:

/** @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;

Pour plus d'informations sur le cycle de vie de React, vous pouvez également consulter le lien ci-dessous: https://facebook.github.io/react/docs/state-and-lifecycle.html

J'ai rencontré le même problème.

Dans la plupart des scénarios en utilisant le hack-ish setTimeout(() => { }, 0)dans componentDidMount()travaillé.

Mais pas dans un cas particulier; et je ne voulais pas utiliser le ReachDOM findDOMNodedepuis la documentation dit:

Remarque: findDOMNode est une hachure d'échappement utilisée pour accéder au nœud DOM sous-jacent. Dans la plupart des cas, l'utilisation de cette trappe d'échappement est déconseillée car elle perce l'abstraction du composant.

( Paquet source: findDOMNode )

Donc, dans ce composant particulier, j'ai dû utiliser l' componentDidUpdate()événement, donc mon code a fini par ressembler à ceci:

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);
}

Et alors:

componentDidUpdate() {
    this.updateDimensions();
}

Enfin, dans mon cas, j'ai dû supprimer l'écouteur créé dans componentDidMount:

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

Après le rendu, vous pouvez spécifier la hauteur comme ci-dessous et spécifier la hauteur des composants de réaction correspondants.

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>
    );`
  }

ou vous pouvez spécifier la hauteur de chaque composant React à l'aide de sass. Spécifiez les 2 premiers composants principaux du composant React à largeur fixe, puis la hauteur du troisième composant principal Div avec Auto. Ainsi, en fonction du contenu du troisième div, la hauteur sera attribuée.

J'ai en fait un problème avec un comportement similaire, je rend un élément vidéo dans un composant avec son attribut id donc quand RenderDOM.render () se termine, il charge un plugin qui a besoin de l'id pour trouver l'espace réservé et il ne le trouve pas.

Le setTimeout avec 0 ms à l'intérieur du componentDidMount () l'a corrigé :)

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

Dans la documentation ReactDOM.render () :

Si le rappel facultatif est fourni, il sera exécuté après le rendu ou la mise à jour du composant.

Pour moi, aucune combinaison window.requestAnimationFrameou setTimeoutproduit des résultats cohérents. Parfois, cela fonctionnait, mais pas toujours - ou parfois il était trop tard.

Je l'ai corrigé en bouclant window.requestAnimationFrameautant de fois que nécessaire.
(Généralement 0 ou 2-3 fois)

La clé est diff > 0: ici, nous pouvons garantir exactement quand la page sera mise à jour.

// 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);
        }
    }());
}

J'ai eu une situation étrange lorsque j'ai besoin d'imprimer un composant réactif qui reçoit une grande quantité de données et de la peinture sur toile. J'ai essayé toutes les approches mentionnées, aucune d'entre elles n'a fonctionné de manière fiable pour moi, avec requestAnimationFrame dans setTimeout, je reçois un canevas vide dans 20% du temps, j'ai donc fait ce qui suit:

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

Fondamentalement, j'ai fait une chaîne de requestAnimationFrame, je ne sais pas si c'est une bonne idée ou non, mais cela fonctionne dans 100% des cas pour moi jusqu'à présent (j'utilise 30 comme valeur pour la variable n).

Il existe en fait une version beaucoup plus simple et plus propre que l'utilisation du cadre d'animation de demande ou des délais d'attente. Je suis surpris que personne n'en ait parlé: le gestionnaire de charge vanilla-js. Si vous le pouvez, utilisez le composant did mount, sinon, liez simplement une fonction sur le support de chargement du composant jsx. Si vous souhaitez que la fonction exécute chaque rendu, exécutez-la également avant de vous renvoyer les résultats dans la fonction de rendu. le code ressemblerait à ceci:

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

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

}

Un peu de mise à jour avec des ES6classes au lieu deReact.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>
    );
  }
}

Consultez également les méthodes de cycle de vie des composants React: le cycle de vie des composants

Chaque composant a beaucoup de méthodes similaires à componentDidMounteg.

• componentWillUnmount() - le composant est sur le point d'être supprimé du navigateur DOM