React's use: Resource Hook: Изчерпателно Ръководство

use: hook в React предлага мощен и декларативен начин за обработка на зареждането на ресурси и извличането на данни директно във вашите компоненти. Той ви позволява да спрете изобразяването, докато ресурсът не е наличен, което води до подобрени потребителски изживявания и опростено управление на данните. Това ръководство ще разгледа use: hook в детайли, покривайки неговите основи, разширени случаи на употреба и най-добри практики.

Какво представлява use: Hook?

use: hook е специален React hook, предназначен за интеграция със Suspense. Suspense е механизъм, който позволява на компонентите да „изчакат“ нещо, преди да се изобразят, като например данни от API. use: hook позволява на компонентите директно да „четат“ обещание или друг ресурс, спирайки компонента, докато ресурсът не бъде разрешен или наличен. Този подход насърчава по-декларативен и ефективен начин за обработка на асинхронни операции в сравнение с традиционните методи като useEffect и библиотеки за управление на състоянието.

Защо да използвате use:?

Ето защо трябва да обмислите използването на use: hook:

• Опростено извличане на данни: Премахва нуждата от ръчно управление на състоянието и useEffect извиквания за извличане на данни.
• Декларативен подход: Ясно изразява зависимостите от данни директно в компонента.
• Подобрено потребителско изживяване: Suspense осигурява плавни преходи и състояния на зареждане.
• По-добра производителност: Намалява ненужните повторни изобразявания и оптимизира зареждането на ресурси.
• Четливост на кода: Опростява логиката на компонентите и подобрява поддръжката.

Основи на use:

Основна употреба

use: hook приема обещание (или друг thenable обект) като свой аргумент и връща разрешената стойност на обещанието. Ако обещанието все още е в очакване, компонентът се спира. Ето един прост пример:

Пример 1: Извличане и показване на данни

Да кажем, че искаме да извлечем потребителски данни от API и да ги покажем. Можем да използваме use: както следва:

Създаване на ресурс (функция за извличане)

Първо, създайте функция за извличане на данните. Тази функция ще върне Promise:

            
async function fetchUser(id) {
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
  if (!response.ok) {
    throw new Error(`Failed to fetch user: ${response.status}`);
  }
  return response.json();
}

            

              
                Copy
              
            
          

Използване на use: в компонент

            
import React, { Suspense } from 'react';

async function fetchUser(id) {
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
  if (!response.ok) {
    throw new Error(`Failed to fetch user: ${response.status}`);
  }
  return response.json();
}

function UserProfile({ userId }) {
  const user = React.use(fetchUser(userId));

  return (
    

      
{user.name}
      
Email: {user.email}
      
Phone: {user.phone}
    
  );
}

function App() {
  return (
    Loading user data...