Otimização de desempenho de reação

1. Reaja a problemas de desempenho

1 Quais são os princípios da otimização de desempenho do React?

• Evite novas renderizações desnecessárias e minimize o número de renderizações de componentes
• Use PureComponent ou shouldComponentUpdate para evitar renderização desnecessária
• Evite cálculos ou operações complexas no método de renderização , que podem ser realizadas em outros métodos do ciclo de vida do componente
• Use as ferramentas de desempenho fornecidas pelo React para análise e otimização de desempenho
• Carregamento sob demanda com React.lazy e React.Suspense
• Use a tecnologia de memorização para armazenar em cache os resultados dos cálculos e evitar cálculos repetidos
• Use React.memo para comparar componentes superficialmente, evitando renderização desnecessária

2. Quais são os métodos de otimização de desempenho do React?

• Use a função de ciclo de vida shouldComponentUpdate para evitar renderização desnecessária e melhorar o desempenho. O código de exemplo é o seguinte:

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

- Use componentes de ordem superior React.memo() para armazenar componentes em cache e evitar renderização desnecessária. O código de exemplo é o seguinte:

const MemoizedComponent = React.memo(MyComponent);

- Use os componentes React.lazy() e Suspense para carregar componentes lentamente para melhorar a velocidade de carregamento da primeira tela. O código de exemplo é o seguinte:

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

- Use React.useCallback() e React.useMemo() para evitar chamadas de função e cálculos desnecessários e melhorar o desempenho. O código de exemplo é o seguinte:

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>
  );
}

- Use React.PureComponent para evitar renderização desnecessária e melhorar o desempenho. O código de exemplo é o seguinte:

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

3. Qual é o motivo para usar o shouldComponentUpdate no React?

- Qual o motivo para usar o shouldComponentUpdate no React?

No React, toda vez que o estado ou as propriedades de um componente mudam, o componente é renderizado novamente . No entanto, em alguns casos, as alterações no estado ou nas propriedades do componente não afetarão a exibição da IU do componente e ocorrerá renderização desnecessária neste momento, resultando em problemas de desempenho. Para resolver esse problema, o React fornece o método shouldComponentUpdate, que nos permite controlar manualmente se o componente precisa ser renderizado novamente.

Por exemplo, suponha que temos um componente de lista cuja fonte de dados é um array. Quando adicionamos um elemento a este array, o estado do componente da lista muda, fazendo com que o componente seja renderizado novamente. No entanto, como o componente de lista exibe apenas o conteúdo do array e não modifica o array, a nova renderização é desnecessária. Neste momento, podemos implementar o método shouldComponentUpdate no componente de lista para determinar se o estado do componente mudou. Se não houver alteração, retorne false para informar ao React que o componente não precisa ser renderizado novamente. Isso evita renderização desnecessária e melhora o desempenho.

4. Qual é o motivo para usar PureComponent no React? -

No React, a renderização de componentes é uma operação que consome relativamente desempenho. O React renderiza novamente os componentes quando seus adereços e estado mudam. Se os adereços e o estado do componente não tiverem mudado, mas o componente ainda for renderizado novamente, isso causará desperdício desnecessário de desempenho. Para evitar isso, PureComponent no React pode ser usado. PureComponent irá comparar automaticamente se os adereços e o estado do componente foram alterados no método de ciclo de vida shouldComponentUpdate.Se não houver alteração, o componente não será renderizado novamente, melhorando assim o desempenho.

Código de amostra:

import React, {
    
     PureComponent } from 'react';

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