M
MLOG
React use Hook yordamida Resurslarni Boshqarish: Maksimal Samaradorlik uchun Resurslar Hayot Siklini Optimallashtirish | MLOG | MLOG

Tushuntirish:

2-misol: WebSocket Ulanishlarini Boshqarish

Ushbu misol "use" Hook'i va maxsus resurs o'rami yordamida WebSocket ulanishini qanday boshqarishni ko'rsatadi.

            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;

Tushuntirish:

3-misol: Fayl Dastaklarini Boshqarish

Ushbu misol NodeJS fayl dastaklari yordamida "use" Hook'i bilan resurslarni boshqarishni ko'rsatadi (Bu faqat NodeJS muhitida ishlaydi va resurs hayot sikli tushunchalarini namoyish qilish uchun mo'ljallangan).

            // This example is designed for a NodeJS environment

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 () => {
      // Cleanup when the component unmounts
      fileHandleResource.close();
    };
  }, [fileHandleResource]);

  return (
    

      
File Contents:

      
{contents}

    

  );
}

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

  return (
    

      
    

  );
}

export default App;

Tushuntirish:

Ilg'or Texnikalar: Xatolik Chegaralari, Resurslar Hovuzi va Server Komponentlari

Asosiy misollardan tashqari, "use" Hook'i yanada murakkab resurslarni boshqarish strategiyalarini amalga oshirish uchun boshqa React xususiyatlari bilan birlashtirilishi mumkin.

Xatolik Chegaralari: Xatoliklarni To'g'ri Bartaraf Etish

Xatolik chegaralari - bu o'zlarining bolalar komponentlari daraxtining istalgan joyida JavaScript xatolarini ushlaydigan, bu xatolarni qayd etadigan va butun komponent daraxtini ishdan chiqarish o'rniga zaxira UI'ni ko'rsatadigan React komponentlaridir. "use" Hook'idan foydalanganda, ma'lumotlarni olish yoki resurslarni ishga tushirish paytida yuzaga kelishi mumkin bo'lgan xatolarni bartaraf etish uchun komponentlaringizni xatolik chegaralari bilan o'rash juda muhimdir.

            import React, { Component } from 'react';

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

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return 
Something went wrong.
;
    }

    return this.props.children; 
  }
}

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

Resurslar Hovuzi: Resurslarni Qayta Ishlatishni Optimallashtirish

Ba'zi stsenariylarda resurslarni tez-tez yaratish va yo'q qilish qimmatga tushishi mumkin. Resurslar hovuzi resurslarni yaratish va yo'q qilish xarajatlarini minimallashtirish uchun qayta ishlatiladigan resurslar hovuzini saqlashni o'z ichiga oladi. "use" hook'i o'z-o'zidan resurslar hovuzini amalga oshirmasa-da, uni alohida resurs hovuzi implementatsiyasi bilan birgalikda ishlatish mumkin.

Ma'lumotlar bazasi ulanishlari hovuzini ko'rib chiqing. Har bir so'rov uchun yangi ulanish yaratish o'rniga, oldindan o'rnatilgan ulanishlar hovuzini saqlab, ularni qayta ishlatishingiz mumkin. "use" Hook'i hovuzdan ulanishlarni olish va bo'shatishni boshqarish uchun ishlatilishi mumkin.

(Konseptual Misol - Implementatsiya ma'lum bir resurs va hovuz kutubxonasiga qarab farqlanadi):

            // Conceptual Example (not a complete, runnable implementation)

import React, { use } from 'react';
// Assume a database connection pool library exists
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 Komponentlari (RSC): "use" Hook'ining Tabiiy Muhiti

"use" Hook'i dastlab React Server Komponentlari uchun ishlab chiqilgan. RSC'lar serverda ishlaydi, bu sizga mijozga kod yubormasdan ma'lumotlarni olish va boshqa server tomonidagi operatsiyalarni bajarish imkonini beradi. Bu unumdorlikni sezilarli darajada yaxshilaydi va mijoz tomonidagi JavaScript to'plamlari hajmini kamaytiradi.

RSC'larda "use" Hook'i mijoz tomonidagi ma'lumotlarni olish kutubxonalariga ehtiyoj sezmasdan to'g'ridan-to'g'ri ma'lumotlar bazalari yoki API'lardan ma'lumotlarni olish uchun ishlatilishi mumkin. Ma'lumotlar serverda olinadi va natijadagi HTML mijozga yuboriladi, u yerda React tomonidan gidratlanadi.

RSC'larda "use" Hook'idan foydalanganda, mijoz tomonidagi holat va hodisalarni boshqaruvchilarning yo'qligi kabi RSC'larning cheklovlaridan xabardor bo'lish muhimdir. Biroq, RSC'lar kuchli va samarali ilovalarni yaratish uchun mijoz tomonidagi komponentlar bilan birlashtirilishi mumkin.

"use" bilan Samarali Resurs Boshqaruvi uchun Eng Yaxshi Amaliyotlar

Resurslarni boshqarish uchun "use" Hook'ining afzalliklarini maksimal darajada oshirish uchun quyidagi eng yaxshi amaliyotlarga rioya qiling:

Keng Tarqalgan Xatolar va Ulardan Qochish Yo'llari

"use" Hook'i ko'plab afzalliklarni taklif qilsa-da, yuzaga kelishi mumkin bo'lgan xatolardan xabardor bo'lish va ulardan qochish yo'llarini bilish muhimdir.

Xulosa: Optimallashtirilgan React Ilovalari uchun "use" Hook'ini Qabul Qilish

React "use" Hook'i React ilovalarida resurslarni boshqarishda sezilarli yutuqni ifodalaydi. Asinxron ma'lumotlarni boshqarishni soddalashtirish, resurslarni tozalashni avtomatlashtirish va Suspense bilan muammosiz integratsiyalash orqali u ishlab chiquvchilarga yanada samaraliroq, qo'llab-quvvatlanadigan va foydalanuvchilar uchun qulay ilovalarni yaratish imkonini beradi.

Asosiy tushunchalarni anglash, amaliy misollarni o'rganish va eng yaxshi amaliyotlarga rioya qilish orqali siz resurslarning hayot siklini optimallashtirish va React ilovalaringizning to'liq salohiyatini ochish uchun "use" Hook'idan samarali foydalanishingiz mumkin. React rivojlanishda davom etar ekan, "use" Hook'i shubhasiz React ekotizimida resurslarni boshqarish kelajagini shakllantirishda tobora muhim rol o'ynaydi.