Ciclo di vita dei componenti ReactJS

In questa sezione, discuteremo i metodi di ciclo di vita dei componenti.

metodi di ciclo di vita

• componentWillMount è stato eseguito sia sul server che sul client prima del rendering.

• componentDidMountViene eseguito solo dopo il primo rendering nel client. È il luogo in cui dovrebbe essere effettuata la richiesta AJAX e l'aggiornamento del DOM o dello stato. Questo metodo viene anche utilizzato per interfacce JavaScript e qualsiasi funzione eseguita in ritardo (ad esempiosetTimeouto) integratosetInterval。我们正在使用它来更新状态，以便我们可以触发其他生命周期方法。

• 。Stiamo utilizzandolo per aggiornare lo stato in modo che possiamo attivare altri metodi di ciclo di vita.componentWillReceivePropsproprietà aggiornate dopo immediate chiamate, quindi chiamare un altro renderer. Stiamoattivato durante l'aggiornamento dello stato. setNewNumber

• shouldComponentUpdatedeve essere restituitotrueofalsevalore. Questo determinerà se il componente verrà aggiornato.truedi default impostato a. Se sei sicuro che il componente non ha bisogno di essere aggiornato dopostateopropsdopo l'aggiornamento, si può restituirefalsevalore.

• componentWillUpdate chiamato prima del rendering.

• componentDidUpdate chiamato immediatamente dopo il rendering.

• componentWillUnmountchiamato dopo che il componente è stato rimosso dal DOM. Stiamomain.js

Nell'esempio seguente, stiamostateimpostato inizialmente nel costruttore. Stiamo impostandosetNewnumberusato per aggiornamentistateTutte le funzioni di ciclo di vita si trovano all'interno del componente 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 RECEIVE 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);

Dopo il rendering iniziale, otterremo lo schermo seguente.