Ciclo de vida de los componentes

Aquí están muy bien explicados:

https://www.gistia.com/understand-react-lifecycle-methods/

Código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import logo from './logo.svg';
import './App.css';
class Contador extends React.Component {
    render() {
        var textStyle = {
            fontSize: 72,
            fontFamily: "sans-serif",
            color: "#333",
            fontWeight: "bold"
        };
        console.log("render: Contador componente");
 
        return (
                <div style={textStyle}>
                    {this.props.display}
                </div>
                );
    }
}
class ContadorParent extends React.Component {
    constructor(props) {
        super(props);
        console.log("constructor: Valores por defecto");
        this.state = {
            count: 0
        };
        this.increase = this.increase.bind(this);
     
    }
    increase() {
        this.setState({
            count: this.state.count + 1
        });
    }
 
    static getDerivedStateFromProps(props, state) {
        console.log("getDerivedStateFromProps: Poco uso")
        return null;
    }
    componentDidUpdate(currentProps, currentState) {
        console.log("componentDidUpdate: El componente se ha actualizado");
    }
    getSnapshotBeforeUpdate(prevProps, prevState) {
        console.log("getSnapshotBeforeUpdate: El componente va a enviar sus cambios")
        return null;
    }
    componentDidMount() {
        console.log("componentDidMount: Componente insertado en el árbol DOM");
    }
    componentWillUnmount() {
        console.log("componentWillUnmount: Component a punto de ser eliminado del DOM");
    }
    shouldComponentUpdate(newProps, newState) {
        console.log("shouldComponentUpdate: ¿Hay que actualizar?");
        if (newState.count < 5) {
            console.log("shouldComponentUpdate: Sí, hay que actualizar");
            return true;
        } else {
            ReactDOM.unmountComponentAtNode(document.getElementById('root'));
            console.log("shouldComponentUpdate: No hay que actualizar");
            return false;
        }
    }
    render() {
        var backgroundStyle = {
            padding: 50,
            border: "#333 2px dotted",
            width: 250,
            height: 100,
            borderRadius: 10,
            textAlign: "center"
        };
        console.log("render: ContadorParent componente");
        return (
                <div style={backgroundStyle}>
                    <Contador display={this.state.count} />
                    <button onClick={this.increase}>
                        +
                    </button>
                      
                </div>
                );
    }
}
;
class App extends Component
 
 
{
    render() {
      
        return (
               <ContadorParent/>
                );
    }
}
 
 
 
;
export default App;

Publicado por

Juan Pablo Fuentes

Formador de programación y bases de datos