M
MLOG
Reactin use-hookin resurssienhallinta: resurssien elinkaarien optimointi huippusuorituskykyyn | MLOG | MLOG

Selitys:

Esimerkki 2: WebSocket-yhteyksien hallinta

Tämä esimerkki näyttää, kuinka WebSocket-yhteyttä hallitaan käyttämällä "use"-hookia ja mukautettua resurssikäärettä.

            import React, { useState, useEffect, use } from 'react';

const createWebSocketResource = (url) => {
  let socket;
  let status = 'pending';
  let messageQueue = [];
  let listeners = [];

  const connect = () => {
    return new Promise((resolve, reject) => {
      socket = new WebSocket(url);

      socket.onopen = () => {
        status = 'connected';
        resolve();
        // Send queued messages
        messageQueue.forEach(msg => socket.send(msg));
        messageQueue = [];
      };

      socket.onerror = (error) => {
        status = 'error';
        reject(error);
      };

      socket.onmessage = (event) => {
        listeners.forEach(listener => listener(event.data));
      };

      socket.onclose = () => {
        status = 'closed';
        listeners = []; // Clear listeners to avoid memory leaks
      };
    });
  };

  const promise = connect();

  return {
    read() {
      use(promise);
    },
    send(message) {
      if (status === 'connected') {
        socket.send(message);
      } else {
        messageQueue.push(message);
      }
    },
    subscribe(listener) {
      listeners.push(listener);
      return () => {
        listeners = listeners.filter(l => l !== listener);
      };
    },
    close() {
        if (socket && socket.readyState !== WebSocket.CLOSED) {
            socket.close();
        }
    }
  };
};

function WebSocketComponent({ url }) {
  const socketResource = createWebSocketResource(url);
  // Suspend until connected
  socketResource.read();
  const [message, setMessage] = useState('');
  const [receivedMessages, setReceivedMessages] = useState([]);

  useEffect(() => {
    const unsubscribe = socketResource.subscribe(data => {
      setReceivedMessages(prevMessages => [...prevMessages, data]);
    });
    return () => {
        unsubscribe();
        socketResource.close();
    };
  }, [socketResource]);

  const sendMessage = () => {
    socketResource.send(message);
    setMessage('');
  };

  return (
    

       setMessage(e.target.value)} />
      
      

        Received Messages:
        
    
          {receivedMessages.map((msg, index) => (
            
  • {msg}
    • 
          ))}
        

      

    

  );
}

function App() {
  return (
    Connecting to WebSocket...
}> ); } export default App;

Selitys:

Esimerkki 3: Tiedostokahvojen hallinta

Tämä esimerkki havainnollistaa resurssienhallintaa "use"-hookilla käyttäen NodeJS:n tiedostokahvoja (Tämä toimii vain NodeJS-ympäristössä ja on tarkoitettu näyttämään resurssien elinkaaren käsitteitä).

            // Tämä esimerkki on suunniteltu NodeJS-ympäristöön

const fs = require('node:fs/promises');
import React, { use } from 'react';

const createFileHandleResource = async (filePath) => {
  let fileHandle;

  const openFile = async () => {
    fileHandle = await fs.open(filePath, 'r');
    return fileHandle;
  };

  const promise = openFile();

  return {
    read() {
      return use(promise);
    },
    async close() {
      if (fileHandle) {
        await fileHandle.close();
        fileHandle = null;
      }
    },
    async readContents() {
      const handle = use(promise);
      const buffer = await handle.readFile();
      return buffer.toString();
    }
  };
};


function FileViewer({ filePath }) {
  const fileHandleResource = createFileHandleResource(filePath);
  const contents = fileHandleResource.readContents();

  React.useEffect(() => {
    return () => {
      // Siivous, kun komponentti poistetaan
      fileHandleResource.close();
    };
  }, [fileHandleResource]);

  return (
    

      
File Contents:

      
{contents}

    

  );
}

// Esimerkkikäyttö
async function App() {
  const filePath = 'example.txt';
  await fs.writeFile(filePath, 'Hello, world!\nThis is a test file.');

  return (
    

      
    

  );
}

export default App;

Selitys:

Edistyneet tekniikat: Virherajat, resurssien poolaus ja palvelinkomponentit

Perusesimerkkien lisäksi "use"-hookia voidaan yhdistää muihin React-ominaisuuksiin toteuttaakseen kehittyneempiä resurssienhallintastrategioita.

Virherajat: Virheiden sulava käsittely

Virherajat (Error Boundaries) ovat React-komponentteja, jotka nappaavat JavaScript-virheet missä tahansa niiden lapsikomponenttipuussa, kirjaavat virheet ja näyttävät varakäyttöliittymän koko komponenttipuun kaatumisen sijaan. Kun käytät "use"-hookia, on ratkaisevan tärkeää kääriä komponentit virherajoihin mahdollisten virheiden käsittelemiseksi datan haun tai resurssien alustuksen aikana.

            import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Päivitä tila, jotta seuraava renderöinti näyttää varakäyttöliittymän.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Voit myös kirjata virheen virheraportointipalveluun
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Voit renderöidä minkä tahansa mukautetun varakäyttöliittymän
      return 
Something went wrong.
;
    }

    return this.props.children; 
  }
}

function App() {
  return (
    
      Loading...
}> ); }

Resurssien poolaus: Resurssien uudelleenkäytön optimointi

Joissakin tilanteissa resurssien luominen ja tuhoaminen usein voi olla kallista. Resurssien poolaus (Resource Pooling) tarkoittaa uudelleenkäytettävien resurssien joukon ylläpitämistä resurssien luomisen ja tuhoamisen aiheuttamien yleiskustannusten minimoimiseksi. Vaikka "use"-hook ei itsessään toteuta resurssien poolausta, sitä voidaan käyttää yhdessä erillisen resurssipoolin toteutuksen kanssa.

Harkitse tietokantayhteyksien poolia. Sen sijaan, että luot uuden yhteyden jokaista pyyntöä varten, voit ylläpitää joukkoa ennalta luotuja yhteyksiä ja käyttää niitä uudelleen. "use"-hookia voidaan käyttää yhteyksien hankkimisen ja vapauttamisen hallintaan poolista.

(Käsitteellinen esimerkki - toteutus vaihtelee tietyn resurssin ja poolauskirjaston mukaan):

            // Käsitteellinen esimerkki (ei täydellinen, ajettava toteutus)

import React, { use } from 'react';
// Oletetaan, että tietokantayhteyksien poolikirjasto on olemassa
import { getConnectionFromPool, releaseConnectionToPool } from './dbPool';

const createDbConnectionResource = () => {
  let connection;

  const acquireConnection = async () => {
    connection = await getConnectionFromPool();
    return connection;
  };

  const promise = acquireConnection();

  return {
    read() {
      return use(promise);
    },
    release() {
      if (connection) {
        releaseConnectionToPool(connection);
        connection = null;
      }
    },
    query(sql) {
      const conn = use(promise);
      return conn.query(sql);
    }
  };
};

function MyDataComponent() {
  const dbResource = createDbConnectionResource();

  React.useEffect(() => {
    return () => {
      dbResource.release();
    };
  }, [dbResource]);

  const data = dbResource.query('SELECT * FROM my_table');
  return 
{data}
;
}

React Server Components (RSC): "use"-hookin luonnollinen koti

"use"-hook suunniteltiin alun perin React Server Components -komponentteja varten. RSC:t suoritetaan palvelimella, mikä mahdollistaa datan hakemisen ja muiden palvelinpuolen operaatioiden suorittamisen lähettämättä koodia asiakkaalle. Tämä parantaa merkittävästi suorituskykyä ja pienentää asiakaspuolen JavaScript-pakettien kokoja.

RSC:issä "use"-hookia voidaan käyttää suoraan datan hakemiseen tietokannoista tai API:sta ilman tarvetta asiakaspuolen hakukirjastoille. Data haetaan palvelimella, ja tuloksena oleva HTML lähetetään asiakkaalle, jossa React hydratoi sen.

Kun käytät "use"-hookia RSC:issä, on tärkeää olla tietoinen RSC:n rajoituksista, kuten asiakaspuolen tilan ja tapahtumankäsittelijöiden puutteesta. RSC:t voidaan kuitenkin yhdistää asiakaspuolen komponentteihin tehokkaiden ja suorituskykyisten sovellusten luomiseksi.

Parhaat käytännöt tehokkaaseen resurssienhallintaan "use"-hookilla

Maksimoidaksesi "use"-hookin hyödyt resurssienhallinnassa, noudata näitä parhaita käytäntöjä:

Yleiset sudenkuopat ja niiden välttäminen

Vaikka "use"-hook tarjoaa lukuisia etuja, on tärkeää olla tietoinen mahdollisista sudenkuopista ja niiden välttämisestä.

Johtopäätös: "use"-hookin omaksuminen optimoiduissa React-sovelluksissa

Reactin "use"-hook edustaa merkittävää edistysaskelta resurssienhallinnassa React-sovelluksissa. Yksinkertaistamalla asynkronista datankäsittelyä, automatisoimalla resurssien siivousta ja integroitumalla saumattomasti Suspenseen, se antaa kehittäjille mahdollisuuden rakentaa suorituskykyisempiä, ylläpidettävämpiä ja käyttäjäystävällisempiä sovelluksia.

Ymmärtämällä ydinkäsitteet, tutkimalla käytännön esimerkkejä ja noudattamalla parhaita käytäntöjä, voit tehokkaasti hyödyntää "use"-hookia resurssien elinkaarien optimoimiseksi ja React-sovellustesi täyden potentiaalin vapauttamiseksi. Reactin jatkaessa kehittymistään "use"-hook tulee epäilemättä olemaan yhä tärkeämmässä roolissa resurssienhallinnan tulevaisuuden muovaamisessa React-ekosysteemissä.