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

Optimització del rendiment

Següent ►
►

En aquest tema, aprendrem com optimitzar el rendiment de les aplicacions React Native per assegurar-nos que funcionin de manera fluida i eficient. Explorarem diverses tècniques i eines que ens ajudaran a identificar i solucionar problemes de rendiment.

Objectius del tema

  • Comprendre la importància de l'optimització del rendiment.
  • Aprendre tècniques per millorar el rendiment de les aplicacions React Native.
  • Utilitzar eines per monitoritzar i analitzar el rendiment.

Contingut

  1. Importància de l'optimització del rendiment
  2. Tècniques d'optimització
  3. Eines per monitoritzar el rendiment
  4. Exercicis pràctics
  5. Conclusió

Importància de l'optimització del rendiment

L'optimització del rendiment és crucial per garantir una experiència d'usuari fluida i responsiva. Les aplicacions lentes o que es bloquegen poden frustrar els usuaris i afectar negativament la seva percepció del producte. A més, una aplicació optimitzada consumeix menys recursos, cosa que és especialment important en dispositius mòbils amb limitacions de memòria i bateria.

Tècniques d'optimització

Evitar renderitzacions innecessàries

Cada vegada que l'estat o les propietats d'un component canvien, React Native torna a renderitzar el component. Això pot ser costós en termes de rendiment si no es gestiona adequadament.

Exemple:

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

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

  console.log('Counter render');

  return (
    <View>
      <Text>{count}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
    </View>
  );
};

const App = () => {
  console.log('App render');

  return (
    <View>
      <Counter />
    </View>
  );
};

export default App;

En aquest exemple, cada vegada que es prem el botó, el component Counter es torna a renderitzar. Si hi ha molts components com aquest, el rendiment es pot veure afectat.

Utilitzar PureComponent i React.memo

PureComponent i React.memo són eines que ajuden a evitar renderitzacions innecessàries comparant les propietats i l'estat anterior amb els nous.

Exemple amb PureComponent:

import React, { PureComponent } from 'react';
import { View, Text, Button } from 'react-native';

class Counter extends PureComponent {
  state = { count: 0 };

  render() {
    console.log('Counter render');
    return (
      <View>
        <Text>{this.state.count}</Text>
        <Button title="Increment" onPress={() => this.setState({ count: this.state.count + 1 })} />
      </View>
    );
  }
}

const App = () => {
  console.log('App render');

  return (
    <View>
      <Counter />
    </View>
  );
};

export default App;

Exemple amb React.memo:

import React, { useState, memo } from 'react';
import { View, Text, Button } from 'react-native';

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

  console.log('Counter render');

  return (
    <View>
      <Text>{count}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
    </View>
  );
});

const App = () => {
  console.log('App render');

  return (
    <View>
      <Counter />
    </View>
  );
};

export default App;

Optimització de llistes amb FlatList i SectionList

FlatList i SectionList són components optimitzats per renderitzar llistes llargues de dades. Utilitzen tècniques com la renderització per demanda i la reutilització de vistes per millorar el rendiment.

Exemple:

import React from 'react';
import { FlatList, Text, View } from 'react-native';

const DATA = Array.from({ length: 1000 }, (_, i) => ({ id: i.toString(), title: `Item ${i}` }));

const Item = ({ title }) => (
  <View>
    <Text>{title}</Text>
  </View>
);

const App = () => {
  return (
    <FlatList
      data={DATA}
      renderItem={({ item }) => <Item title={item.title} />}
      keyExtractor={item => item.id}
    />
  );
};

export default App;

Utilitzar la càrrega per demanda (lazy loading)

La càrrega per demanda permet carregar components només quan són necessaris, reduint el temps de càrrega inicial de l'aplicació.

Exemple:

import React, { Suspense, lazy } from 'react';
import { View, Text } from 'react-native';

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

const App = () => {
  return (
    <View>
      <Text>App Component</Text>
      <Suspense fallback={<Text>Loading...</Text>}>
        <LazyComponent />
      </Suspense>
    </View>
  );
};

export default App;

Minimitzar l'ús de l'estat global

L'ús excessiu de l'estat global pot provocar renderitzacions innecessàries. És millor mantenir l'estat local quan sigui possible.

Eines per monitoritzar el rendiment

React DevTools

React DevTools és una eina que permet inspeccionar la jerarquia de components de React i analitzar el seu rendiment.

Flipper

Flipper és una eina de depuració extensible per a aplicacions mòbils. Permet monitoritzar el rendiment, veure registres, inspeccionar la base de dades i molt més.

Exercicis pràctics

Exercici 1: Optimització de renderitzacions

  1. Crea una aplicació amb diversos components que es renderitzin innecessàriament.
  2. Utilitza PureComponent o React.memo per evitar aquestes renderitzacions.

Exercici 2: Optimització de llistes

  1. Crea una llista llarga d'elements utilitzant FlatList.
  2. Assegura't que la llista es renderitzi de manera eficient.

Exercici 3: Càrrega per demanda

  1. Implementa la càrrega per demanda en una aplicació amb diversos components.

Conclusió

L'optimització del rendiment és essencial per garantir una experiència d'usuari fluida i eficient. Hem après diverses tècniques per millorar el rendiment de les aplicacions React Native, així com eines per monitoritzar i analitzar el rendiment. Practicar aquestes tècniques i utilitzar les eines adequades ens ajudarà a crear aplicacions més ràpides i responsives.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats