REACT CONCECTS IMPORTANTES

1- React ganchos

puede usar usereducer para administrar estructuras de estado complejas, puede useEffect para reaccionar gancho que le permite sincronizar un componente con un sistema externo. Puede useCallback / usememo para la optimización de rendimiento, useref para el acceso DOM y crea ganchos personalizados.

2. Renderiza el patrón de accesorios

Otra forma de hacer que los componentes sean muy reutilizables, es utilizando el patrón render de aprop . Un accesorio de renderizado es un accesorio en un componente, qué valor es una función que devuelve un elemento jsx . El componente en sí no representa nada además del accesorio de renderizado. En su lugar, el componente simplemente llama al aprop de renderizado, en lugar de implementar su propia lógica de renderizado .

3. Suspenso

Suspense le permite mostrar un respaldo hasta que sus hijos hayan terminado de cargar.

Ejemplo :

}>
  

4. Límite de error

TORNOTARIO DE ERROR es un componente específico de React que envuelve un árbol de componentes y evita que cualquier error dentro de ese componente se propague y haga que una aplicación completa se bloquee.

Para usarlo, simplemente debe envolver el árbol de componentes que desea proteger con un componente de límite de error. El borde de errores detectará errores y mostrará la interfaz de usuario respaldo cuando ocurran dentro del árbol de componentes envuelto.

Ejemplo :

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Example "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in ErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    logErrorToMyService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return this.props.fallback;
    }

    return this.props.children;
  }
}


Something went wrong}>
  

5. Pasar datos con contexto

Por lo general, pasará la información de un componente principal a un componente infantil a través de props . Pero aprobar los accesorios puede volverse detallado e inconveniente si tiene que pasarlos a través de muchos componentes en el medio, o si muchos componentes en su aplicación necesitan la misma información. context permite que el componente principal ponga alguna información a disposición de cualquier componente en el árbol debajo de él, no importa qué tan profundo, sin pasarla explícitamente a través de props .

6. Gestión estatal

State Management es un concepto crucial en React, las bibliotecas de JavaScript más populares en el mundo para construir interfaces dinámicas de usuario.
Administrar estado de aplicación usando Redux.

7. división de código

Bundling es genial, pero a medida que su aplicación crece, su paquete también crecerá. Especialmente si incluye bibliotecas de terceros grandes . Debe vigilar el código que está incluyendo en su paquete para que no lo haga tan grande accidentalmente que su aplicación toma un mucho tiempo para cargar .

Para evitar terminar con un paquete grande grande , es bueno adelantarse al problema y comenzar a "dividir" su paquete . código-splitting es una característica compatible con Bundlers como webpack , rollup y browserify (vía factor-bundle) que puede crear múltiples bundles que pueden cargarse dinámicamente en [&] runtime .

Su aplicación puede ayudarlo a "carga perezosa" solo las cosas que el usuario necesita actualmente, lo que puede mejorar dramáticamente el rendimiento de su aplicación. Si bien no ha reducido la cantidad total de código en su aplicación, ha evitado la carga del código que el usuario nunca puede necesitar y ha reducido la cantidad de código necesaria durante la carga inicial . Conclusión

En este artículo, escribí sobre

. Estos conceptos avanzados mejoran el rendimiento y la capacidad de mantenimiento en sus aplicaciones React . Básicamente puede comprender y usar estos conceptos