Учебники

ReactJS — жизненный цикл компонентов

Ноябрь 4, 2018

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

Методы жизненного цикла

  • componentWillMount выполняется перед рендерингом как на стороне сервера, так и на стороне клиента.

  • componentDidMount выполняется после первого рендеринга только на стороне клиента. Именно здесь должны происходить запросы AJAX и обновления DOM или состояния. Этот метод также используется для интеграции с другими платформами JavaScript и любыми функциями с отложенным выполнением, такими как setTimeout или setInterval . Мы используем его для обновления состояния, чтобы мы могли запускать другие методы жизненного цикла.

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

  • shouldComponentUpdate должен возвращать значение true или false . Это определит, будет ли компонент обновляться или нет. По умолчанию установлено значение true . Если вы уверены, что компонент не должен отображаться после обновления состояния или реквизита , вы можете вернуть ложное значение.

  • componentWillUpdate вызывается непосредственно перед рендерингом.

  • componentDidUpdate вызывается сразу после рендеринга.

  • componentWillUnmount вызывается после размонтирования компонента из dom. Мы размонтируем наш компонент в main.js.

componentWillMount выполняется перед рендерингом как на стороне сервера, так и на стороне клиента.

componentDidMount выполняется после первого рендеринга только на стороне клиента. Именно здесь должны происходить запросы AJAX и обновления DOM или состояния. Этот метод также используется для интеграции с другими платформами JavaScript и любыми функциями с отложенным выполнением, такими как setTimeout или setInterval . Мы используем его для обновления состояния, чтобы мы могли запускать другие методы жизненного цикла.

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

shouldComponentUpdate должен возвращать значение true или false . Это определит, будет ли компонент обновляться или нет. По умолчанию установлено значение true . Если вы уверены, что компонент не должен отображаться после обновления состояния или реквизита , вы можете вернуть ложное значение.

componentWillUpdate вызывается непосредственно перед рендерингом.

componentDidUpdate вызывается сразу после рендеринга.

componentWillUnmount вызывается после размонтирования компонента из dom. Мы размонтируем наш компонент в main.js.

В следующем примере мы установим начальное состояние в функции конструктора. SetNewnumber используется для обновления состояния . Все методы жизненного цикла находятся внутри компонента Content.

App.jsx 

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         data: 0
      }
      this.setNewNumber = this.setNewNumber.bind(this)
   };
   setNewNumber() {
      this.setState({data: this.state.data + 1})
   }
   render() {
      return (
         <div>
            <button onClick = {this.setNewNumber}>INCREMENT</button>
            <Content myNumber = {this.state.data}></Content>
         </div>
      );
   }
}
class Content extends React.Component {
   componentWillMount() {
      console.log('Component WILL MOUNT!')
   }
   componentDidMount() {
      console.log('Component DID MOUNT!')
   }
   componentWillReceiveProps(newProps) {    
      console.log('Component WILL RECIEVE PROPS!')
   }
   shouldComponentUpdate(newProps, newState) {
      return true;
   }
   componentWillUpdate(nextProps, nextState) {
      console.log('Component WILL UPDATE!');
   }
   componentDidUpdate(prevProps, prevState) {
      console.log('Component DID UPDATE!')
   }
   componentWillUnmount() {
      console.log('Component WILL UNMOUNT!')
   }
   render() {
      return (
         <div>
            <h3>{this.props.myNumber}</h3>
         </div>
      );
   }
}
export default App;

main.js 

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

setTimeout(() => {
   ReactDOM.unmountComponentAtNode(document.getElementById('app'));}, 10000);

После первоначального рендера мы получим следующий экран.

49
Share: