Cycle de vie des composants ReactJS

Dans ce chapitre, nous discuterons des méthodes de cycle de vie des composants.

méthodes de cycle de vie

• componentWillMount déjà exécuté sur le serveur et le client avant le rendu.

• componentDidMountSeulement après la première rendu exécuté sur le client. C'est l'endroit où il faudrait effectuer des requêtes AJAX et des mises à jour DOM ou d'état. Cette méthode est également utilisée pour d'autres cadres JavaScript et pour toute fonction d'exécution différée (par exemplesetTimeoutou) intégrationsetInterval。Nous l'utilisons pour mettre à jour l'état afin de déclencher d'autres méthodes de cycle de vie.

• componentWillReceivePropsappeler immédiatement après la mise à jour des props, puis appeler un autre renderer. Nous venons desetNewNumberdétecté lors de la mise à jour de l'état.

• shouldComponentUpdatedoit retournertrueoufalsevaleur. Cela déterminera si le composant sera mis à jour.truepar défaut, il est défini sur. Si vous êtes sûr que le composant n'a pas besoin d'être mis à jour aprèsstateoupropsafficher après la mise à jour, vous pouvez alors retournerfalsevaleur.

• componentWillUpdate appeler avant le rendu.

• componentDidUpdate appeler immédiatement après le rendu.

• componentWillUnmountappeler après que le composant ait été démonté du DOM. Nous sommes en train demain.js.

Dans l'exemple suivant, nous allonsstatedans le constructeur, nous définissons la valeur initiale. Nous allonssetNewnumberutilisé pour les mises à jourstateToutes les méthodes de cycle de vie se trouvent à l'intérieur du composant 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('Le composant VA ÊTRE MONTÉ!')
　　　}
　　　componentDidMount() {
　　　　　　console.log('Le composant A ÉTÉ MONTÉ!')
　　　}
　　　componentWillReceiveProps(newProps) {　　　　
　　　　　　console.log('Le composant VA RECEVOIR DES 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);

Après le premier rendu, nous obtenons l'écran suivant.