Reaccionar optimización del rendimiento

1. Reaccionar ante problemas de rendimiento

1 ¿Cuáles son los principios de optimización del rendimiento de React?

• Evite rerenderizaciones innecesarias y minimice la cantidad de renderizaciones de componentes
• Utilice PureComponent o shouldComponentUpdate para evitar renderizados innecesarios
• Evite cálculos u operaciones complejas en el método de renderizado , que se pueden realizar en otros métodos del ciclo de vida del componente.
• Utilice las herramientas de rendimiento proporcionadas por React para el análisis y la optimización del rendimiento.
• Carga bajo demanda con React.lazy y React.Suspense
• Utilice tecnología de memorización para almacenar en caché los resultados de los cálculos para evitar cálculos repetidos
• Utilice React.memo para comparar componentes superficialmente, evitando renderizaciones innecesarias

2. ¿Cuáles son los métodos de optimización del rendimiento de React?

• Utilice la función de ciclo de vida mustComponentUpdate para evitar renderizaciones innecesarias y mejorar el rendimiento. El código de muestra es el siguiente:

  class MyComponent extends React.Component {
        
        
    shouldComponentUpdate(nextProps, nextState) {
        
        
      return this.props.someProp !== nextProps.someProp;
    }
    render() {
        
        
      return <div>{
        
        this.props.someProp}</div>;
    }
  }
  

- Utilice componentes de orden superior React.memo() para almacenar en caché los componentes y evitar renderizados innecesarios. El código de muestra es el siguiente:

const MemoizedComponent = React.memo(MyComponent);

- Utilice los componentes React.lazy() y Suspense para cargar componentes de forma diferida y mejorar la velocidad de carga de la primera pantalla. El código de muestra es el siguiente:

 const MyComponent = React.lazy(() => import('./MyComponent'));
 function App() {
    
    
   return (
     <div>
       <Suspense fallback={
    
    <div>Loading...</div>}>
         <MyComponent />
       </Suspense>
     </div>
   );
 }

- Utilice React.useCallback() y React.useMemo() para evitar llamadas a funciones y cálculos innecesarios y mejorar el rendimiento. El código de muestra es el siguiente:

function MyComponent({
     
      someProp }) {
    
    
  const memoizedCallback = React.useCallback(() => {
    
    
    // do something with someProp
  }, [someProp]);
  const memoizedValue = React.useMemo(() => {
    
    
    // do some heavy calculation with someProp
    return someResult;
  }, [someProp]);
  return (
    <div>
      <button onClick={
    
    memoizedCallback}>Click me</button>
      <div>{
    
    memoizedValue}</div>
    </div>
  );
}

- Utilice React.PureComponent para evitar renderizados innecesarios y mejorar el rendimiento. El código de muestra es el siguiente:

class MyComponent extends React.PureComponent {
    
    
 render() {
    
    
   return <div>{
    
    this.props.someProp}</div>;
 }
}

3. ¿Cuál es el motivo para utilizar shouldComponentUpdate en React?

- ¿Cuál es el motivo para utilizar shouldComponentUpdate en React?

En React, cada vez que el estado o las propiedades de un componente cambian, el componente se vuelve a renderizar . Sin embargo, en algunos casos, los cambios en el estado o las propiedades del componente no afectarán la visualización de la interfaz de usuario del componente. En este momento, se producirá una representación innecesaria, lo que provocará problemas de rendimiento. Para resolver este problema, React proporciona el método shouldComponentUpdate, que nos permite controlar manualmente si es necesario volver a renderizar el componente.

Por ejemplo, supongamos que tenemos un componente de lista cuya fuente de datos es una matriz. Cuando agregamos un elemento a esta matriz, el estado del componente de la lista cambia, lo que hace que el componente se vuelva a representar. Sin embargo, dado que el componente de lista solo muestra el contenido de la matriz y no modifica la matriz, no es necesario volver a representarla. En este momento, podemos implementar el método shouldComponentUpdate en el componente de la lista para determinar si el estado del componente ha cambiado. Si no hay cambios, devuelve falso para indicarle a React que no es necesario volver a renderizar el componente. Esto evita renderizaciones innecesarias y mejora el rendimiento.

4. ¿Cuál es el motivo para utilizar PureComponent en React? -

En React, la renderización de componentes es una operación que consume relativamente rendimiento. React vuelve a renderizar los componentes cuando sus accesorios y estado cambian. Si los accesorios y el estado del componente no han cambiado, pero el componente aún se vuelve a renderizar, provocará un desperdicio innecesario de rendimiento. Para evitar esto, se puede utilizar PureComponent en React. PureComponent comparará automáticamente si los accesorios y el estado del componente han cambiado en el método del ciclo de vida mustComponentUpdate. Si no hay cambios, el componente no se volverá a representar, lo que mejorará el rendimiento.

Código de muestra:

import React, {
    
     PureComponent } from 'react';

class MyComponent extends PureComponent {
    
    
 render() {
    
    
   return <div>{
    
    this.props.name}</div>;
 }
}