Цикл жизни компонентов ReactJS

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

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

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

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

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

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

• componentWillUpdate Вызов перед рендерингом.

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

• componentWillUnmountВызов после того, как компонент будет удален из DOM. Мы находимся в процессе удаления компонентаmain.js.

В следующем примере мы будемstateУстановите начальное значение в конструкторе. УстановитеsetNewnumberДля обновленийstateВсе.lifecycle методы находятся внутри компонента 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}>УВЕЛИЧИТЬ</button>
　　　　　　　　　　　　<Content myNumber = {this.state.data}></Content>
　　　　　　　　　</div>
　　　　　　;
　　　}
}
class Content extends React.Component {
　　　componentWillMount() {
　　　　　　console.log('Компонент УСТАНОВИТСЯ!)
　　　}
　　　componentDidMount() {
　　　　　　console.log('Компонент УСТАНОВЛЕН!)
　　　}
　　　componentWillReceiveProps(newProps) {　　　　
　　　　　　console.log('Компонент УНИЧТОЖИТ ПРИЗНАКИ!)
　　　}
　　　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);

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