Componentes de clase y ciclo de vida

Un componente también puede escribirse con una clase que hereda de Component. Encontrarás este estilo en proyectos existentes. Para código nuevo utilizaremos principalmente funciones, pero conocer las clases ayuda a entender el ciclo de vida.

Tres momentos importantes #

• Montaje: el componente aparece en la interfaz.
• Actualización: React vuelve a calcularlo porque cambian props o estado.
• Desmontaje: el componente se retira de la interfaz.

1import { Component, useState } from 'react';
2
3interface Props {
4  nombre: string;
5}
6
7interface Estado {
8  visitas: number;
9}
10
11class Saludo extends Component<Props, Estado> {
12  state: Estado = { visitas: 0 };
13
14  componentDidMount() {
15    console.log('Saludo se ha montado');
16  }
17
18  componentDidUpdate(_prevProps: Props, prevState: Estado) {
19    if (prevState.visitas !== this.state.visitas) {
20      console.log('Ha cambiado el número de visitas');
21    }
22  }
23
24  componentWillUnmount() {
25    console.log('Saludo se ha desmontado');
26  }
27
28  incrementar = () => {
29    this.setState((prev) => ({ visitas: prev.visitas + 1 }));
30  };
31
32  render() {
33    return (
34      <button onClick={this.incrementar}>
35        Hola, {this.props.nombre}: {this.state.visitas}
36      </button>
37    );
38  }
39}
40
41export default function App() {
42  const [visible, setVisible] = useState(true);
43  return (
44    <>
45      <button onClick={() => setVisible((prev) => !prev)}>
46        Mostrar u ocultar saludo
47      </button>
48      {visible && <Saludo nombre="Ana" />}
49    </>
50  );
51}

render devuelve el JSX y debe ser puro: no debe iniciar peticiones ni cambiar el estado mientras calcula la pantalla. Las props se leen con this.props y el estado con this.state. Para actualizarlo se usa this.setState, sin modificar directamente this.state.visitas.

componentDidUpdate permite comparar los valores anteriores con los actuales. Cambiar estado sin una condición dentro de ese método puede provocar un bucle. componentWillUnmount es el lugar para liberar recursos que haya creado la clase, como un temporizador.

La propiedad flecha incrementar conserva el this de la instancia cuando se utiliza como manejador. Los Hooks como useState no se llaman dentro de una clase; el ejemplo usa ese Hook en el componente funcional App.

Prueba tú #

Incrementa las visitas y oculta el saludo. Al volver a mostrarlo se crea una instancia nueva con cero visitas. En desarrollo, StrictMode puede repetir comprobaciones del ciclo de vida.

Cuestionario del tema #

Abre el cuestionario en las actividades de este tema para comprobar lo aprendido. Cada respuesta incluye una explicación.