От автора: в этой главе мы рассмотрим, какие методы обрабатывают в React жизненный цикл компонента.
Методы жизненного цикла
componentWillMount выполняется перед рендерингом как на стороне сервера, так и на стороне клиента.
componentDidMount выполняется после первого рендеринга только на стороне клиента. Здесь выполняются запросы AJAX и обновления DOM или состояния. Этот метод также используется для интеграции с другими фреймворками JavaScript и любыми функциями с задержкой выполнения, такими как setTimeout или setInterval. Мы используем его для обновления состояния, чтобы мы могли запускать другие методы жизненного цикла.
componentWillReceiveProps вызывается, как только свойство обновляется до вызова другого рендера. Мы вызываем его из setNewNumber, когда обновили состояние.
shouldComponentUpdate должен возвращать значение true или false. Это определит, будет ли компонент обновляться или нет. По умолчанию установлено значение true. Если вы уверены, что компонент не нуждается в рендеринге после обновления состояния или свойства, вы можете вернуть значение false.
componentWillUpdate вызывается непосредственно перед рендерингом.
componentDidUpdate вызывается сразу после рендеринга.
componentWillUnmount вызывается после того, как компонент размонтируется из dom. Мы размонтируем компонент в main.js.
В следующем примере мы устанавливаем начальное состояние в функции конструктора. Значение NumberNewnumber используется для обновления состояния. Все методы жизненного цикла находятся внутри компонента 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);
После первоначального рендеринга мы получим следующее.
Только componentWillMount и componentDidMount будут регистрироваться в консоли, так как мы еще ничего не обновили.
Когда мы нажмем кнопку INCREMENT, произойдет обновление, и будут запущены другие методы жизненного цикла.
Через десять секунд компонент отключится, и в консоли будет зарегистрировано последнее событие.
Примечание. Методы жизненного цикла всегда будут вызываться в одном порядке, поэтому рекомендуется написать их в корректной последовательности, как показано в примере.
Источник: https://www.tutorialspoint.com/
Редакция: Команда webformyself.