El mejor tutorial de Reaccionar ciclo de vida de los componentes en 2024. En este tutorial podrás aprender Reaccionar ciclo de vida de los componentes

Reaccionar ciclo de vida de los componentes

En este capítulo vamos a discutir el ciclo de vida Reaccionar componentes.

Ciclo de vida de un componente se puede dividir en tres estados:

• Montaje: verdadera DOM se ha insertado
• Actualización: volver a ser prestados
• Desmontaje: verdadera DOM se ha eliminado

El método del ciclo de vida son:

• componentWillMount antes de emitir la llamada, el servicio de cliente también.

• componentDidMount: después de la primera llamada a render sólo el cliente.Después de que el componente se ha generado la estructura DOM correspondiente, se puede acceder a través de this.getDOMNode (). Si desea utilizar con otros frameworks de JavaScript, puede llamar a este método setTimeout, setInterval o enviar peticiones AJAX, etc. (diferentes operaciones unitarias para evitar el bloqueo de la interfaz de usuario).

• componentWillReceiveProps se llama cuando el componente recibe un nuevo puntal.Este método no se llamará durante la inicialización de procesamiento.

• shouldComponentUpdate devuelve un valor booleano.Se llama cuando el componente recibe nuevos apoyos o estado. No se llama la inicialización o utilizar forceUpdate.
  Se puede utilizar cuando no es necesario para confirmar los componentes actualizados.

• componentWillUpdate en el componente recibe nuevos apoyos o estado, pero no ha rendido se llama.No va a ser llamado durante la inicialización.

• Después de la actualización es componente completocomponentDidUpdate llamada inmediatamente.No va a ser llamado durante la inicialización.

• componentWillUnmount llamó inmediatamente cuando el componente se elimina de la DOM.

Una descripción detallada de estos métodos, se puede hacer referencia a la documentación oficial .

Los siguientes ejemplos Después de los componentes se cargan Hola, fijado por un método de temporizador componentDidMount todos los componentes de reposición 100 milisegundos transparencia y la re-representación:

var Hello = React.createClass({
  getInitialState: function () {
    return {
      opacity: 1.0
    };
  },

  componentDidMount: function () {
    this.timer = setInterval(function () {
      var opacity = this.state.opacity;
      opacity -= .05;
      if (opacity < 0.1) {
        opacity = 1.0;
      }
      this.setState({
        opacity: opacity
      });
    }.bind(this), 100);
  },

  render: function () {
    return (
      <div style={{opacity: this.state.opacity}}>
        Hello {this.props.name}
      </div>
    );
  }
});

ReactDOM.render(
  <Hello name="world"/>,
  document.body
);

Trate »

Los siguientes ejemplos se inicializanestado, setNewnumberpara la actualización deestado.Todos los componentes del ciclo de vidade contenido.

var Button = React.createClass({
  getInitialState: function() {
    return {
      data:0
    };
  },
  setNewNumber: function() {
    this.setState({data: this.state.data + 1})
  },
  render: function () {
      return (
         <div>
            <button onClick = {this.setNewNumber}>INCREMENT</button>
            <Content myNumber = {this.state.data}></Content>
         </div>
      );
    }
})
var Content = React.createClass({
  componentWillMount:function() {
      console.log('Component WILL MOUNT!')
  },
  componentDidMount:function() {
       console.log('Component DID MOUNT!')
  },
  componentWillReceiveProps:function(newProps) {
        console.log('Component WILL RECIEVE PROPS!')
  },
  shouldComponentUpdate:function(newProps, newState) {
        return true;
  },
  componentWillUpdate:function(nextProps, nextState) {
        console.log('Component WILL UPDATE!');
  },
  componentDidUpdate:function(prevProps, prevState) {
        console.log('Component DID UPDATE!')
  },
  componentWillUnmount:function() {
         console.log('Component WILL UNMOUNT!')
  },

    render: function () {
      return (
        <div>
          <h3>{this.props.myNumber}</h3>
        </div>
      );
    }
});
ReactDOM.render(
   <div>
      <Button />
   </div>,
  document.getElementById('example')
);

Trate »