Reagir ciclo de vida útil dos componentes

Neste capítulo vamos discutir o ciclo de vida Reagir componentes.

Ciclo de vida de um componente pode ser dividido em três estados:

• Montagem: true DOM foi inserido
• Atualização: a ser re-processado
• Desmontando: true DOM foi removido

O método do ciclo de vida são os seguintes:

• componentWillMount antes de processar a chamada, o serviço do lado do cliente também.

• componentDidMount: após a primeira chamada para renderizar somente o cliente.Depois que o componente foi gerado estrutura de DOM correspondente, pode ser acessado através this.getDOMNode (). Se você deseja usar com outros frameworks JavaScript, você pode chamar esse método setTimeout, setInterval ou enviar solicitações de AJAX, etc. (operações unitárias diferentes para evitar UI de bloqueio).

• componentWillReceiveProps é chamado quando o componente recebe um novo prop.Este método não será chamado durante a inicialização render.

• shouldComponentUpdate retorna um valor booleano.É chamado quando o componente recebe novos adereços ou estado. Não é chamado na inicialização ou usar ForceUpdate.
  Ele pode ser usado quando você não precisa confirmar os componentes atualizados.

• componentWillUpdate no componente recebe novos adereços ou estado, mas não tem nenhuma renda é chamado.Não vai ser chamado durante a inicialização.

• Após a atualização é componentecomponentDidUpdate completa chamado imediatamente.Não vai ser chamado durante a inicialização.

• componentWillUnmount imediatamente chamado quando o componente é removido da DOM.

Uma descrição detalhada desses métodos, você pode consultar a documentação oficial .

Os seguintes exemplos Após componentes Olá são carregados, definido por um método temporizador componentDidMount todos os componentes de redefinição de 100 milissegundos transparência e re-rendering:

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

tente »

Os exemplos a seguir são inicializadosestado, setNewnumberpara atualizarestado.Todos os componentes do ciclo de vidade conteúdo.

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

tente »