React useState: Stāvokļa Huka Optimizācijas Stratēģiju Apgūšana

useState huks ir fundamentāls būvelements React komponentu stāvokļa pārvaldībai. Lai gan tas ir neticami daudzpusīgs un viegli lietojams, nepareiza tā izmantošana var radīt veiktspējas problēmas, īpaši sarežģītās lietojumprogrammās. Šī visaptverošā rokasgrāmata pēta progresīvas stratēģijas useState optimizēšanai, lai nodrošinātu, ka jūsu React lietojumprogrammas ir veiktspējīgas un viegli uzturamas.

Izpratne par useState un tā ietekmi

Pirms iedziļināties optimizācijas tehnikās, atkārtosim useState pamatus. useState huks ļauj funkcionālajiem komponentiem uzturēt stāvokli. Tas atgriež stāvokļa mainīgo un funkciju šī mainīgā atjaunināšanai. Katru reizi, kad stāvoklis tiek atjaunināts, komponents tiek pārrenderēts.

Pamata piemērs:

import React, { useState } from 'react';

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

  return (
    

      
Count: {count}
       setCount(count + 1)}>Increment
    
  );
}

export default Counter;

Šajā vienkāršajā piemērā, noklikšķinot uz pogas "Increment", tiek atjaunināts count stāvoklis, izraisot Counter komponenta pārrenderēšanu. Lai gan tas lieliski darbojas maziem komponentiem, nekontrolēta pārrenderēšana lielākās lietojumprogrammās var nopietni ietekmēt veiktspēju.

Kāpēc optimizēt useState?

Nevajadzīgas pārrenderēšanas ir galvenais veiktspējas problēmu cēlonis React lietojumprogrammās. Katra pārrenderēšana patērē resursus un var novest pie lēnas lietotāja pieredzes. useState optimizēšana palīdz:

• Samazināt nevajadzīgas pārrenderēšanas: Novērst komponentu pārrenderēšanu, ja to stāvoklis faktiski nav mainījies.
• Uzlabot veiktspēju: Padarīt jūsu lietojumprogrammu ātrāku un atsaucīgāku.
• Uzlabot uzturamību: Rakstīt tīrāku un efektīvāku kodu.

1. optimizācijas stratēģija: Funkcionālie atjauninājumi

Atjauninot stāvokli, pamatojoties uz iepriekšējo stāvokli, vienmēr izmantojiet setCount funkcionālo formu. Tas novērš problēmas ar novecojušiem noslēgumiem (stale closures) un nodrošina, ka jūs strādājat ar visjaunāko stāvokli.

Nepareizi (potenciāli problemātiski):

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

  const increment = () => {
    setTimeout(() => {
      setCount(count + 1); // Potenciāli novecojusi 'count' vērtība
    }, 1000);
  };

  return (
    

      
Count: {count}
      Increment
    
  );
}

Pareizi (funkcionālais atjauninājums):

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

  const increment = () => {
    setTimeout(() => {
      setCount(prevCount => prevCount + 1); // Nodrošina pareizu 'count' vērtību
    }, 1000);
  };

  return (
    

      
Count: {count}
      Increment
    
  );
}

Izmantojot setCount(prevCount => prevCount + 1), jūs nododat funkciju setCount. React pēc tam ievietos stāvokļa atjauninājumu rindā un izpildīs funkciju ar visjaunāko stāvokļa vērtību, izvairoties no novecojuša noslēguma problēmas.

2. optimizācijas stratēģija: Nemainīgi stāvokļa atjauninājumi

Strādājot ar objektiem vai masīviem savā stāvoklī, vienmēr atjauniniet tos nemainīgā veidā (immutably). Tieša stāvokļa mutācija neizraisīs pārrenderēšanu, jo React paļaujas uz referenču vienlīdzību, lai atklātu izmaiņas. Tā vietā izveidojiet jaunu objekta vai masīva kopiju ar vēlamajām modifikācijām.

Nepareizi (stāvokļa mutācija):

function ShoppingCart() {
  const [items, setItems] = useState([{ id: 1, name: 'Apple', quantity: 2 }]);

  const updateQuantity = (id, newQuantity) => {
    const item = items.find(item => item.id === id);
    if (item) {
      item.quantity = newQuantity; // Tieša mutācija! Neizraisīs pārrenderēšanu.
      setItems(items); // Tas radīs problēmas, jo React neatklās izmaiņas.
    }
  };

  return (
    

      {items.map(item => (
        

          {item.name} - Quantity: {item.quantity}
           updateQuantity(item.id, item.quantity + 1)}>Increase
        
      ))}
    
  );
}

Pareizi (nemainīgs atjauninājums):

function ShoppingCart() {
  const [items, setItems] = useState([{ id: 1, name: 'Apple', quantity: 2 }]);

  const updateQuantity = (id, newQuantity) => {
    setItems(prevItems =>
      prevItems.map(item =>
        item.id === id ? { ...item, quantity: newQuantity } : item
      )
    );
  };

  return (
    

      {items.map(item => (
        

          {item.name} - Quantity: {item.quantity}
           updateQuantity(item.id, item.quantity + 1)}>Increase
        
      ))}
    
  );
}

Izlabotajā versijā mēs izmantojam .map(), lai izveidotu jaunu masīvu ar atjaunināto elementu. Izklāšanas operators (...item) tiek izmantots, lai izveidotu jaunu objektu ar esošajām īpašībām, un pēc tam mēs pārrakstām quantity īpašību ar jauno vērtību. Tas nodrošina, ka setItems saņem jaunu masīvu, izraisot pārrenderēšanu un atjauninot lietotāja saskarni.

3. optimizācijas stratēģija: `useMemo` izmantošana, lai izvairītos no nevajadzīgām pārrenderēšanām

useMemo huku var izmantot, lai iegaumētu (memoize) aprēķina rezultātu. Tas ir noderīgi, ja aprēķins ir dārgs un atkarīgs tikai no noteiktiem stāvokļa mainīgajiem. Ja šie stāvokļa mainīgie nav mainījušies, useMemo atgriezīs kešatmiņā saglabāto rezultātu, novēršot aprēķina atkārtotu izpildi un izvairoties no nevajadzīgām pārrenderēšanām.

Piemērs:

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

function ExpensiveComponent({ data }) {
  const [multiplier, setMultiplier] = useState(2);

  // Dārgs aprēķins, kas atkarīgs tikai no 'data'
  const processedData = useMemo(() => {
    console.log('Processing data...');
    // Simulēt dārgu operāciju
    let result = data.map(item => item * multiplier);
    return result;
  }, [data, multiplier]);

  return (
    

      
Processed Data: {processedData.join(', ')}
       setMultiplier(multiplier + 1)}>Increment Multiplier
    
  );
}

function App() {
  const [data, setData] = useState([1, 2, 3, 4, 5]);

  return (
    

      
       setData([6, 7, 8, 9, 10])}>Change Data
    
  );
}

export default App;

Šajā piemērā processedData tiek pārrēķināts tikai tad, kad mainās data vai multiplier. Ja mainās citas ExpensiveComponent stāvokļa daļas, komponents tiks pārrenderēts, bet processedData netiks pārrēķināts, tādējādi ietaupot apstrādes laiku.

4. optimizācijas stratēģija: `useCallback` izmantošana funkciju iegaumēšanai

Līdzīgi kā useMemo, useCallback iegaumē funkcijas. Tas ir īpaši noderīgi, nododot funkcijas kā props bērnu komponentiem. Bez useCallback katrā renderēšanas reizē tiek izveidota jauna funkcijas instance, kas liek bērna komponentam pārrenderēties, pat ja tā props faktiski nav mainījušies. Tas notiek tāpēc, ka React pārbauda, vai props atšķiras, izmantojot stingro vienlīdzību (===), un jauna funkcija vienmēr atšķirsies no iepriekšējās.

Piemērs:

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

const Button = React.memo(({ onClick, children }) => {
  console.log('Button rendered');
  return {children};
});

function ParentComponent() {
  const [count, setCount] = useState(0);

  // Iegaumēt 'increment' funkciju
  const increment = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []); // Tukšs atkarību masīvs nozīmē, ka šī funkcija tiek izveidota tikai vienu reizi

  return (
    

      
Count: {count}
      Increment
    
  );
}

export default ParentComponent;

Šajā piemērā increment funkcija ir iegaumēta, izmantojot useCallback ar tukšu atkarību masīvu. Tas nozīmē, ka funkcija tiek izveidota tikai vienu reizi, kad komponents tiek ielādēts. Tā kā Button komponents ir ietīts React.memo, tas tiks pārrenderēts tikai tad, ja mainīsies tā props. Tā kā increment funkcija katrā renderēšanas reizē ir tā pati, Button komponents netiks nevajadzīgi pārrenderēts.

5. optimizācijas stratēģija: `React.memo` izmantošana funkcionālajiem komponentiem

React.memo ir augstākas kārtas komponents (higher-order component), kas iegaumē funkcionālos komponentus. Tas novērš komponenta pārrenderēšanu, ja tā props nav mainījušies. Tas ir īpaši noderīgi tīriem komponentiem (pure components), kas ir atkarīgi tikai no saviem props.

Piemērs:

import React from 'react';

const MyComponent = React.memo(({ name }) => {
  console.log('MyComponent rendered');
  return 
Hello, {name}!
;
});

export default MyComponent;

Lai efektīvi izmantotu React.memo, pārliecinieties, ka jūsu komponents ir tīrs, kas nozīmē, ka tas vienmēr renderē to pašu rezultātu ar tiem pašiem ievades props. Ja jūsu komponentam ir blakusefekti vai tas paļaujas uz kontekstu, kas var mainīties, React.memo var nebūt labākais risinājums.

6. optimizācijas stratēģija: Lielu komponentu sadalīšana

Lieli komponenti ar sarežģītu stāvokli var kļūt par veiktspējas problēmu avotu. Šo komponentu sadalīšana mazākos, vieglāk pārvaldāmos gabalos var uzlabot veiktspēju, izolējot pārrenderēšanas. Kad mainās viena lietojumprogrammas stāvokļa daļa, ir jāpārrenderē tikai attiecīgais apakškomponents, nevis viss lielais komponents.

Piemērs (konceptuāls):

Tā vietā, lai būtu viens liels UserProfile komponents, kas apstrādā gan lietotāja informāciju, gan aktivitāšu plūsmu, sadaliet to divos komponentos: UserInfo un ActivityFeed. Katrs komponents pārvalda savu stāvokli un pārrenderējas tikai tad, kad mainās tā specifiskie dati.

7. optimizācijas stratēģija: Reduceru izmantošana ar `useReducer` sarežģītai stāvokļa loģikai

Strādājot ar sarežģītām stāvokļa pārejām, useReducer var būt spēcīga alternatīva useState. Tas nodrošina strukturētāku veidu, kā pārvaldīt stāvokli, un bieži vien var novest pie labākas veiktspējas. useReducer huks pārvalda sarežģītu stāvokļa loģiku, bieži ar vairākām apakšvērtībām, kurām nepieciešami detalizēti atjauninājumi, pamatojoties uz darbībām.

Piemērs:

import React, { useReducer } from 'react';

const initialState = { count: 0, theme: 'light' };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + 1 };
    case 'decrement':
      return { ...state, count: state.count - 1 };
    case 'toggleTheme':
      return { ...state, theme: state.theme === 'light' ? 'dark' : 'light' };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    

      
Count: {state.count}
      
Theme: {state.theme}
       dispatch({ type: 'increment' })}>Increment
       dispatch({ type: 'decrement' })}>Decrement
       dispatch({ type: 'toggleTheme' })}>Toggle Theme
    
  );
}

export default Counter;

Šajā piemērā reducer funkcija apstrādā dažādas darbības, kas atjaunina stāvokli. useReducer var arī palīdzēt optimizēt renderēšanu, jo jūs varat kontrolēt, kuras stāvokļa daļas izraisa komponentu renderēšanu ar iegaumēšanu, salīdzinot ar potenciāli plašākām pārrenderēšanām, ko izraisa daudzi `useState` huki.

8. optimizācijas stratēģija: Selektīvi stāvokļa atjauninājumi

Dažreiz komponentam var būt vairāki stāvokļa mainīgie, bet tikai daži no tiem izraisa pārrenderēšanu, kad tie mainās. Šādos gadījumos jūs varat selektīvi atjaunināt stāvokli, izmantojot vairākus useState hukus. Tas ļauj izolēt pārrenderēšanas tikai uz tām komponenta daļām, kuras patiešām ir jāatjaunina.

Piemērs:

import React, { useState } from 'react';

function MyComponent() {
  const [name, setName] = useState('John');
  const [age, setAge] = useState(30);
  const [location, setLocation] = useState('New York');

  // Only update location when the location changes
  const handleLocationChange = (newLocation) => {
    setLocation(newLocation);
  };

  return (
    

      
Name: {name}
      
Age: {age}
      
Location: {location}
       handleLocationChange('London')}>Change Location
    
  );
}

export default MyComponent;

Šajā piemērā, mainot location, tiks pārrenderēta tikai tā komponenta daļa, kas attēlo location. name un age stāvokļa mainīgie neizraisīs komponenta pārrenderēšanu, ja vien tie netiks skaidri atjaunināti.

9. optimizācijas stratēģija: Stāvokļa atjauninājumu Debouncing un Throttling

Scenārijos, kur stāvokļa atjauninājumi tiek izsaukti bieži (piemēram, lietotāja ievades laikā), "debouncing" un "throttling" var palīdzēt samazināt pārrenderēšanu skaitu. Debouncing aizkavē funkcijas izsaukumu līdz brīdim, kad ir pagājis noteikts laiks kopš pēdējās funkcijas izsaukšanas reizes. Throttling ierobežo, cik reižu funkciju var izsaukt noteiktā laika periodā.

Piemērs (Debouncing):

import React, { useState, useCallback } from 'react';
import debounce from 'lodash.debounce'; // Instalējiet lodash: npm install lodash

function SearchComponent() {
  const [searchTerm, setSearchTerm] = useState('');

  const debouncedSetSearchTerm = useCallback(
    debounce((text) => {
      setSearchTerm(text);
      console.log('Search term updated:', text);
    }, 300),
    []
  );

  const handleInputChange = (event) => {
    debouncedSetSearchTerm(event.target.value);
  };

  return (
    

      
      
Searching for: {searchTerm}
    
  );
}

export default SearchComponent;

Šajā piemērā debounce funkcija no Lodash tiek izmantota, lai aizkavētu setSearchTerm funkcijas izsaukumu par 300 milisekundēm. Tas novērš stāvokļa atjaunināšanu pie katra taustiņa nospiediena, samazinot pārrenderēšanu skaitu.

10. optimizācijas stratēģija: `useTransition` izmantošana nebloķējošiem UI atjauninājumiem

Uzdevumiem, kas var bloķēt galveno pavedienu un izraisīt UI sasalšanu, var izmantot useTransition huku, lai atzīmētu stāvokļa atjauninājumus kā nesteidzamus. React tad prioritizēs citus uzdevumus, piemēram, lietotāja mijiedarbību, pirms apstrādās nesteidzamos stāvokļa atjauninājumus. Tas nodrošina plūdenāku lietotāja pieredzi, pat strādājot ar skaitļošanas ziņā intensīvām operācijām.

Piemērs:

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

function MyComponent() {
  const [isPending, startTransition] = useTransition();
  const [data, setData] = useState([]);

  const loadData = () => {
    startTransition(() => {
      // Simulēt datu ielādi no API
      setTimeout(() => {
        setData([1, 2, 3, 4, 5]);
      }, 1000);
    });
  };

  return (
    

      
        {isPending ? 'Loading...' : 'Load Data'}
      
      {isPending && 
Loading data...
}
      {data.length > 0 && 
Data: {data.join(', ')}
}
    
  );
}

export default MyComponent;

Šajā piemērā startTransition funkcija tiek izmantota, lai atzīmētu setData izsaukumu kā nesteidzamu. React tad prioritizēs citus uzdevumus, piemēram, UI atjaunināšanu, lai atspoguļotu ielādes stāvokli, pirms apstrādā stāvokļa atjauninājumu. isPending karodziņš norāda, vai pāreja notiek.

Papildu apsvērumi: Konteksts un globālā stāvokļa pārvaldība

Sarežģītām lietojumprogrammām ar koplietojamu stāvokli apsveriet iespēju izmantot React Context vai globālu stāvokļa pārvaldības bibliotēku, piemēram, Redux, Zustand vai Jotai. Šie risinājumi var nodrošināt efektīvākus veidus, kā pārvaldīt stāvokli un novērst nevajadzīgas pārrenderēšanas, ļaujot komponentiem abonēt tikai tās konkrētās stāvokļa daļas, kas tiem nepieciešamas.

Noslēgums

useState optimizēšana ir ļoti svarīga, lai izveidotu veiktspējīgas un viegli uzturamas React lietojumprogrammas. Izprotot stāvokļa pārvaldības nianses un pielietojot šajā rokasgrāmatā izklāstītās metodes, jūs varat ievērojami uzlabot savu React lietojumprogrammu veiktspēju un atsaucību. Atcerieties profilēt savu lietojumprogrammu, lai identificētu veiktspējas problēmas, un izvēlieties tās optimizācijas stratēģijas, kas vislabāk atbilst jūsu konkrētajām vajadzībām. Neveiciet priekšlaicīgu optimizāciju, neidentificējot reālas veiktspējas problēmas. Vispirms koncentrējieties uz tīra, uzturama koda rakstīšanu un pēc tam optimizējiet pēc vajadzības. Galvenais ir atrast līdzsvaru starp veiktspēju un koda lasāmību.