Preguntas de la entrevista - React (6): componentes de React y ciclo de vida

1. Reaccionar componentes

Introducción a los componentes de React:
los componentes de React son la unidad básica para crear interfaces de usuario. Dividen la interfaz en partes independientes y reutilizables, lo que hace que el código sea más modular y fácil de mantener. Los componentes de React pueden ser componentes funcionales o componentes de clase que reciben datos de entrada (llamados accesorios) y devuelven elementos de React que representan la interfaz de usuario.

Crear componentes de React:
en React, hay dos formas de crear componentes: componentes de función y componentes de clase. Los métodos de creación de estos dos métodos se presentan respectivamente a continuación.

1. Componentes de función:
   los componentes de función son la forma más sencilla de crear componentes. Es una función pura que recibe accesorios como parámetros y devuelve un elemento de React. Los componentes funcionales son adecuados para componentes simples sin requisitos de estado interno o ciclo de vida.

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

En el ejemplo anterior, Greetinges un componente de función que recibe una namepropiedad como accesorios y devuelve un h1elemento que contiene el mensaje de bienvenida.

2. Componentes de clase:
   los componentes de clase son componentes creados utilizando la sintaxis de clase ES6, que hereda React.Componentclases y puede tener funciones internas de estado y ciclo de vida. Los componentes de clase son adecuados para componentes complejos que requieren gestión de estado o control del ciclo de vida.

import React from 'react';

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

En el ejemplo anterior, Counteres un componente de clase que hereda de React.Component, con estado interno county una función para incrementar el valor del contador al hacer clic en un botón.

Uso de componentes:
ya sea un componente de función o un componente de clase, se puede usar en la función de representación de otros componentes, como etiquetas HTML.

import React from 'react';

function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
      <Counter />
    </div>
  );
}

En el ejemplo anterior, el componente de función y el componente de clase Appdefinidos previamente se utilizan en el componente.GreetingCounter

2. Reaccionar ciclo de vida

El ciclo de vida de React es clave para comprender y dominar los componentes de React. Al utilizar correctamente los métodos del ciclo de vida, podemos realizar las operaciones necesarias en diferentes etapas y lograr un control y una interacción más detallados.

Reaccionar métodos de ciclo de vida

Los métodos del ciclo de vida de React se pueden dividir en tres fases principales: la fase de montaje, la fase de actualización y la fase de desmontaje. Cada fase y sus correspondientes métodos de ciclo de vida se explican en detalle a continuación.

Fase de montaje:
Se llama cuando el componente se inserta en el DOM.

1. constructor(accesorios)：

Constructor, utilizado para inicializar el estado del componente y los métodos de enlace. Normalmente, el estado interno del componente se inicializa en esta etapa.

2. prestar():

Método de renderizado, devuelve un elemento React que representa la interfaz de usuario del componente. El contenido de la interfaz de usuario debe devolverse dentro de este método.

3. componenteDidMount()：

Se llama después de montar el componente, adecuado para solicitudes de red, operaciones DOM u operaciones de inicialización. Esta fase se utiliza a menudo para la recuperación de datos asincrónica.

Fase de actualización:
se llama cuando cambian los accesorios o el estado del componente.

1. prestar():

La fase de actualización también llama al método de renderizado para volver a renderizar la interfaz de usuario del componente.

2. componenteDidUpdate(prevProps, prevState)：

Llamado después de actualizar el componente, aquí se pueden manejar actualizaciones DOM, solicitudes de red u otras operaciones de efectos secundarios. Los parámetros prevProps y prevState representan los accesorios y el estado anteriores.

Fase de desmontaje:
se llama cuando el componente se elimina del DOM.

• componenteWillUnmount()：

Se llama cuando el componente está a punto de desinstalarse, adecuado para operaciones de limpieza, como cancelar solicitudes de red, borrar temporizadores, etc.

icono

ejemplo de código

El siguiente es un ejemplo que utiliza los métodos del ciclo de vida de React, que muestra el orden de ejecución y el propósito de los métodos del ciclo de vida.

import React from 'react';

class LifecycleExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    console.log('constructor');
  }

  increment() {
    this.setState({
      count: this.state.count + 1
    })
  }

  componentDidMount() {
    console.log('componentDidMount');
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('componentDidUpdate', prevProps, prevState);
  }

  componentWillUnmount() {
    console.log('componentWillUnmount');
  }

  render() {
    console.log('render');
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.increment()}>increment</button>
      </div>
    );
  }
}

class App extends React.Component {
  state = { showComponent: true };

  toggleComponent = () => {
    this.setState({ showComponent: !this.state.showComponent });
  };

  render() {
    return (
      <div>
        {this.state.showComponent && <LifecycleExample />}
        <button onClick={this.toggleComponent}>Toggle Component</button>
      </div>
    );
  }
}

export default App;