El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Tècniques d'optimització del rendiment de React

Següent ►
►

En aquest tema, explorarem diverses tècniques per optimitzar el rendiment de les aplicacions React. L'objectiu és assegurar-nos que les nostres aplicacions siguin ràpides i eficients, oferint una experiència d'usuari fluida.

  1. Evitar renderitzacions innecessàries

1.1. Utilitzar React.memo

React.memo és una funció d'ordre superior que podem utilitzar per memoritzar components funcionals. Això significa que el component només es tornarà a renderitzar si les seves props canvien.

import React from 'react';

const MyComponent = React.memo(({ name }) => {
  console.log('Renderitzant MyComponent');
  return <div>Hola, {name}!</div>;
});

export default MyComponent;

1.2. Implementar shouldComponentUpdate en components de classe

Per als components de classe, podem utilitzar el mètode shouldComponentUpdate per evitar renderitzacions innecessàries.

import React, { Component } from 'react';

class MyComponent extends Component {
  shouldComponentUpdate(nextProps) {
    return nextProps.name !== this.props.name;
  }

  render() {
    console.log('Renderitzant MyComponent');
    return <div>Hola, {this.props.name}!</div>;
  }
}

export default MyComponent;

  1. Utilitzar useMemo i useCallback

2.1. useMemo

useMemo memoritza el valor retornat d'una funció de càlcul, evitant càlculs innecessaris en renderitzacions futures.

import React, { useMemo } from 'react';

const MyComponent = ({ items }) => {
  const sortedItems = useMemo(() => {
    console.log('Ordenant elements');
    return items.sort();
  }, [items]);

  return (
    <ul>
      {sortedItems.map(item => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
};

export default MyComponent;

2.2. useCallback

useCallback memoritza una funció, evitant que es recreï en cada renderització.

import React, { useCallback } from 'react';

const MyComponent = ({ onClick }) => {
  const handleClick = useCallback(() => {
    console.log('Botó clicat');
    onClick();
  }, [onClick]);

  return <button onClick={handleClick}>Clica'm</button>;
};

export default MyComponent;

  1. Divisió de codi i càrrega mandrosa

3.1. React.lazy i Suspense

Podem utilitzar React.lazy per carregar components de manera mandrosa, només quan es necessiten. Suspense ens permet mostrar un indicador de càrrega mentre el component es carrega.

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

const MyComponent = () => (
  <div>
    <Suspense fallback={<div>Carregant...</div>}>
      <LazyComponent />
    </Suspense>
  </div>
);

export default MyComponent;

  1. Utilitzar React.PureComponent

React.PureComponent és una versió optimitzada de React.Component que implementa un shouldComponentUpdate superficial per a les props i state.

import React, { PureComponent } from 'react';

class MyComponent extends PureComponent {
  render() {
    console.log('Renderitzant MyComponent');
    return <div>Hola, {this.props.name}!</div>;
  }
}

export default MyComponent;

  1. Evitar operacions costoses en el renderitzat

5.1. Descompondre components grans

Dividir components grans en components més petits i reutilitzables pot ajudar a millorar el rendiment.

5.2. Evitar càlculs costosos en el renderitzat

Evitar realitzar càlculs costosos directament en el mètode render. Utilitzar useMemo o moure els càlculs fora del renderitzat.

Exercicis pràctics

Exercici 1: Optimitzar un component amb React.memo

import React, { useState } from 'react';

const Counter = React.memo(({ count }) => {
  console.log('Renderitzant Counter');
  return <div>Comptador: {count}</div>;
});

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Incrementar</button>
      <Counter count={count} />
    </div>
  );
};

export default App;

Exercici 2: Utilitzar useMemo per optimitzar el càlcul d'una llista ordenada

import React, { useState, useMemo } from 'react';

const SortedList = ({ items }) => {
  const sortedItems = useMemo(() => {
    console.log('Ordenant elements');
    return items.sort();
  }, [items]);

  return (
    <ul>
      {sortedItems.map(item => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
};

const App = () => {
  const [items, setItems] = useState(['banana', 'apple', 'orange']);

  return (
    <div>
      <button onClick={() => setItems([...items, 'grape'])}>Afegir raïm</button>
      <SortedList items={items} />
    </div>
  );
};

export default App;

Resum

En aquesta secció, hem après diverses tècniques per optimitzar el rendiment de les aplicacions React, incloent l'ús de React.memo, shouldComponentUpdate, useMemo, useCallback, React.lazy, Suspense, i React.PureComponent. També hem vist com evitar operacions costoses en el renderitzat i com descompondre components grans en components més petits i reutilitzables. Aquestes tècniques ens ajudaran a crear aplicacions React més ràpides i eficients.

◄ Anterior
◄
Següent ►
►

Curs de React

Mòdul 1: Introducció a React

Mòdul 2: Components de React

Mòdul 3: Treballar amb esdeveniments

Mòdul 4: Conceptes avançats de components

Mòdul 5: Hooks de React

Mòdul 6: Enrutament en React

Mòdul 7: Gestió de l'estat

Mòdul 8: Optimització del rendiment

Mòdul 9: Proves en React

Mòdul 10: Temes avançats

Mòdul 11: Projecte: Construir una aplicació completa

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats