Necesito saber cuándo Hidden Element se montó.
Utilizo ref para verificar si montó y controló este elemento.
Y use componentDidUpdate para verificar cuándo se ocultó el elemento oculto.

Pero use componentDidUpdate en un gran proyecto, algunos elementos a menudo desencadenan componentDidUpdate.
Me temo que la eficiencia será mala.
¿Hay alguna otra manera de saber cuándo se montó Hidden Element?
Aprecio tu ayuda.


Además, por qué necesito saberlo porque necesito usar un paquete Radium para construir la animación.
Cuando el 'someState' es verdadero, reproduciré automáticamente la animación para el elemento.

Yo uso el estilo animation-play-state : 'running'.
Esta animación se romperá en el safari, pero está bien que los usuarios la visiten por primera vez.
Cuando los usuarios actualizan el safari y tienen un caché, los usuarios lo visitan nuevamente y la animación no puede reproducirse automáticamente.

Así que configuré animation-play-state : paused.
Cuando confirme que el elemento se montó, usaré ref change animation-play-state para ejecutar.


Mi código sudo

import React from "react";

const initialState = {
  someState: false
};

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = initialState;
    this.hiddenElement = null;
  }

  componentDidMount() {
    console.log("componentDidMount");
  }

  componentDidUpdate() {
    console.log("componentDidUpdate");
    if (this.hiddenElement !== null) console.log("hiddenElement did Mount");
    // I will change the properties of this.hiddenElement, or others in the next steps.
  }

  render() {
    const { someState } = this.state;
    return (
      <div className="App">
        <button onClick={() => this.setState({ someState: true })}>
          Click Me
        </button>
        {someState && (
          <div ref={r => (this.hiddenElement = r)}>Hidden Element</div>
        )}
      </div>
    );
  }
}

export default App;
0
M.R. 23 abr. 2020 a las 12:02

2 respuestas

Puede verificar dentro de su componentDidUpdate el valor de su someState. Si esto es verdadero , entonces está seguro de que se representa el elemento que necesita, ya que componentDidUpdate se invoca después de se produce una actualización (por lo tanto, después del método de representación).

...

 componentDidUpdate() {
   if (this.state.someState) {
     // your element is rendered, do what you need
   }
  }

...
0
Michalis Garganourakis 23 abr. 2020 a las 09:55

De acuerdo, si está utilizando un paquete externo y necesita manipular el elemento en función de un cambio de estado, entonces tendrá que usar básicamente componentDidUpdate(). Solo preocúpese por el rendimiento cuando se convierta en un cuello de botella (después de perfilar cosas, etc.).

Dado que establecer una referencia no causa componentDidUpdate (no es un poco de estado), es posible que desee refactorizar el método de mutación de animación a algo como esto (observe cómo se llama al método update...() en el devolución de llamada de referencia).

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { someState: false };
    this.hiddenElement = null;
  }

  updateElementAnimation() {
    if (!this.hiddenElement) return; // not mounted yet
    if (this.state.someState) {
      this.hiddenElement.something();
    } else {
      this.hiddenElement.somethingElse();
    }
  }

  componentDidUpdate() {
    this.updateElementAnimation();
  }

  render() {
    const { someState } = this.state;
    return (
      <div className="App">
        <button onClick={() => this.setState({ someState: true })}>Click Me</button>
        {someState && (
          <div
            ref={r => {
              this.hiddenElement = r;
              this.updateElementAnimation();
            }}
          >
            Hidden Element
          </div>
        )}
      </div>
    );
  }
}
0
AKX 23 abr. 2020 a las 09:52