Реагировать компонент жизненного цикла

В этой главе мы обсудим жизненный цикл Реагировать компонентов.

Жизненный цикл компонента можно разделить на три государства:

• Монтаж: правда DOM был вставлен
• Обновление: будучи перерисовываются
• Размонтирование: правда DOM была удалена

Метод жизненного цикла являются:

• componentWillMount перед отображением вызова на стороне клиента обслуживание также.

• componentDidMount: после первого вызова , чтобы сделать только клиент.После того, как компонент был сформирован соответствующий структуру DOM, можно получить доступ через this.getDOMNode (). Если вы хотите использовать с другими фреймворков, вы можете вызвать этот метод setTimeout, setInterval или отправить AJAX запросы и т.д. (различные единичные операции для предотвращения блокировки UI).

• componentWillReceiveProps вызывается , когда компонент получает новую опору.Этот метод не будет вызываться во время инициализации рендеринга.

• shouldComponentUpdate возвращает логическое значение.Она вызывается, когда компонент получает новые подпорки или состояние. Он не вызывается при инициализации или использовать forceUpdate.
  Он может быть использован, когда вам не нужно, чтобы подтвердить обновленные компоненты.

• componentWillUpdate в компоненте не получает новых реквизита или состояние , но не рендер называется.Это не будет вызываться во время инициализации.

• После завершения обновления компонентcomponentDidUpdate вызывается немедленно.Это не будет вызываться во время инициализации.

• componentWillUnmount сразу вызывается при удалении компонента из DOM.

Подробное описание этих методов, вы можете обратиться к официальной документации .

Следующие примеры После компонентов Hello загружены, установлены методом таймера componentDidMount каждые 100 миллисекунд прозрачность компонента сброса и повторного рендеринга:

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

Попробуйте »

Следующие примеры инициализируетсясостояние, setNewnumberдля обновлениясостояния.Все жизненным цикломсодержания компонентов.

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

Попробуйте »