Reagire codice "dopo il rendering"?

Ho un'app in cui devo impostare l'altezza di un elemento (diciamo "contenuto dell'app") in modo dinamico. Prende l'altezza del "chrome" dell'app e lo sottrae, quindi imposta l'altezza del "contenuto dell'app" per adattarlo al 100% all'interno di tali vincoli. Questo è semplicissimo con le viste vaniglia JS, jQuery o Backbone, ma sto lottando per capire quale sarebbe il giusto processo per farlo in React?

Di seguito è riportato un esempio di componente. Voglio essere in grado di impostare app-contentl'altezza in modo che sia al 100% della finestra meno la dimensione di ActionBare BalanceBar, ma come faccio a sapere quando viene eseguito il rendering di tutto e dove inserirò il calcolo in questa Classe di Reattività?

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

Questo metodo viene chiamato una volta dopo il rendering del componente. Quindi il tuo codice sarebbe simile.

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

Uno svantaggio dell'uso componentDidUpdate, o componentDidMountè che sono effettivamente eseguiti prima che gli elementi dom siano stati disegnati, ma dopo che sono stati passati da React al DOM del browser.

Ad esempio, se è necessario impostare node.scrollHeight su node.scrollTop renderizzato, gli elementi DOM di React potrebbero non essere sufficienti. Devi aspettare che gli elementi siano stati verniciati per ottenere la loro altezza.

Soluzione:

Utilizzare requestAnimationFrameper assicurarsi che il codice venga eseguito dopo il disegno dell'oggetto appena renderizzato

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

Nella mia esperienza window.requestAnimationFramenon è stato sufficiente per garantire che il DOM fosse stato completamente renderizzato / riflusso completo da componentDidMount. Ho un codice in esecuzione che accede al DOM immediatamente dopo una componentDidMountchiamata e l'utilizzo esclusivo window.requestAnimationFramecomporterebbe la presenza dell'elemento nel DOM; tuttavia, gli aggiornamenti alle dimensioni dell'elemento non vengono ancora riflessi poiché non è stato ancora eseguito un riflusso.

L'unico modo veramente affidabile per farlo funzionare era avvolgere il mio metodo in a setTimeoute a window.requestAnimationFrameper garantire che l'attuale stack di chiamate di React venisse cancellato prima di registrarsi per il rendering del frame successivo.

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

Se dovessi speculare sul motivo per cui ciò si sta verificando / necessario, potrei vedere gli aggiornamenti del DOM in batch di React e non applicare effettivamente le modifiche al DOM fino al completamento dello stack corrente.

In definitiva, se stai usando le misure DOM nel codice che stai attivando dopo i callback di React, probabilmente vorrai usare questo metodo.

Solo per aggiornare un po 'questa domanda con i nuovi metodi Hook, puoi semplicemente usare l' 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. 
     [])
}

Inoltre, se si desidera eseguire prima della vernice del layout, utilizzare il useLayoutEffectgancio:

import React, { useLayoutEffect } from 'react'

export default function App(props) {

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

È possibile modificare lo stato e quindi eseguire i calcoli nel callback setState . Secondo la documentazione di React, questo è "garantito al fuoco dopo l'applicazione dell'aggiornamento".

Questo dovrebbe essere fatto dentro componentDidMounto altrove nel codice (come su un gestore di eventi di ridimensionamento) piuttosto che nel costruttore.

Questa è una buona alternativa window.requestAnimationFramee non presenta i problemi che alcuni utenti hanno menzionato qui (è necessario combinarli setTimeouto chiamarli più volte). Per esempio:

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

Sento che questa soluzione è sporca, ma qui andiamo:

componentDidMount() {
    this.componentDidUpdate()
}

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

Ora mi siedo qui e aspetto i voti negativi.

React ha pochi metodi del ciclo di vita che aiutano in queste situazioni, gli elenchi inclusi ma non limitati a getInitialState, getDefaultProps, componentWillMount, componentDidMount ecc.

Nel tuo caso e nei casi che devono interagire con gli elementi DOM, devi attendere che il dom sia pronto, quindi usa componentDidMount come di seguito:

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

Inoltre, per ulteriori informazioni sul ciclo di vita di React, è possibile consultare il link seguente: https://facebook.github.io/react/docs/state-and-lifecycle.html

Ho riscontrato lo stesso problema.

Nella maggior parte degli scenari utilizzando l'hack-ish setTimeout(() => { }, 0)in componentDidMount()funzionato.

Ma non in un caso speciale; e non volevo usare il ReachDOM findDOMNodepoiché la documentazione dice:

Nota: findDOMNode è un tratteggio di escape utilizzato per accedere al nodo DOM sottostante. Nella maggior parte dei casi, l'uso di questo tratteggio di escape è scoraggiato perché perfora l'astrazione del componente.

(Fonte: findDOMNode )

Quindi in quel particolare componente ho dovuto usare l' componentDidUpdate()evento, quindi il mio codice ha finito per essere così:

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

E poi:

componentDidUpdate() {
    this.updateDimensions();
}

Infine, nel mio caso, ho dovuto rimuovere l'ascoltatore creato in componentDidMount:

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

Dopo il rendering, è possibile specificare l'altezza come di seguito e specificare l'altezza per i componenti di reazione corrispondenti.

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

oppure puoi specificare l'altezza di ciascun componente di reazione usando sass. Specificare i primi 2 div principali del componente di reazione con larghezza fissa e poi l'altezza del div principale del terzo componente con auto. Quindi in base al contenuto del terzo div verrà assegnata l'altezza.

In realtà sto riscontrando problemi con un comportamento simile, eseguo il rendering di un elemento video in un componente con l'attributo id, quindi quando RenderDOM.render () termina carica un plug-in che ha bisogno dell'id per trovare il segnaposto e non riesce a trovarlo.

SetTimeout con 0ms all'interno del componentDidMount () risolto :)

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

Dalla documentazione di ReactDOM.render () :

Se viene fornito il callback opzionale, verrà eseguito dopo il rendering o l'aggiornamento del componente.

Per me, nessuna combinazione di window.requestAnimationFrameo setTimeoutprodotto risultati coerenti. A volte ha funzionato, ma non sempre - o a volte sarebbe troppo tardi.

L'ho risolto ripetendo window.requestAnimationFrametutte le volte necessarie.
(Tipicamente 0 o 2-3 volte)

La chiave è diff > 0: qui possiamo assicurarci esattamente quando la pagina si aggiorna.

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

Ho avuto una situazione strana quando ho bisogno di stampare un componente di reazione che riceve una grande quantità di dati e dipinge su tela. Ho provato tutti gli approcci citati, nessuno di loro ha funzionato in modo affidabile per me, con requestAnimationFrame all'interno di setTimeout ottengo tela vuota nel 20% delle volte, quindi ho fatto quanto segue:

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

Fondamentalmente ho creato una catena di requestAnimationFrame's, non sono sicuro che questa sia una buona idea o no, ma finora funziona nel 100% dei casi (sto usando 30 come valore per n variabile).

Esiste in realtà una versione molto più semplice e più pulita rispetto all'utilizzo di animazioni di richiesta o timeout. Iam ha sorpreso che nessuno lo abbia sollevato: il gestore di onload di vanilla-js. Se è possibile, utilizzare il componente ha fatto il mount, in caso contrario, è sufficiente associare una funzione sul gancio di caricamento del componente jsx. Se si desidera che la funzione esegua ogni rendering, eseguirla anche prima di restituire si ottiene la funzione di rendering. il codice sarebbe simile al seguente:

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

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

}

Un po 'di aggiornamento con le ES6classi anzichéReact.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>
    );
  }
}

Inoltre, controlla i metodi del ciclo di vita dei componenti React: Il ciclo di vita dei componenti

Ogni componente ha molti metodi simili ad componentDidMountes.

• componentWillUnmount() - il componente sta per essere rimosso dal DOM del browser