Асинхронность

Как выполнить HTTP-запросы в React?

Для выполнения HTTP-запросов в React можно использовать стандартные методы, такие как fetch или библиотеки, такие как axios.

Пример с использованием `fetch`:

import React, { useState, useEffect } from "react";

const MyComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("https://api.example.com/data")
      .then((response) => response.json())
      .then((data) => setData(data))
      .catch((error) => console.error("Error fetching data:", error));
  }, []);

  return (
    <div>
      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : "Loading..."}
    </div>
  );
};

export default MyComponent;

Пример с использованием `axios`:

import React, { useState, useEffect } from "react";
import axios from "axios";

const MyComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    axios
      .get("https://api.example.com/data")
      .then((response) => setData(response.data))
      .catch((error) => console.error("Error fetching data:", error));
  }, []);

  return (
    <div>
      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : "Loading..."}
    </div>
  );
};

export default MyComponent;

Запрос при появлении компонента можно выполнить в useEffect. Проверяйте response.ok у fetch, храните состояние ошибки и отменяйте запрос либо игнорируйте устаревший ответ в cleanup. Запрос по действию пользователя запускайте из обработчика события. Кеширование и повторную загрузку удобнее поручить библиотеке или загрузчику маршрута.

Как обновить состояние компонента после выполнения асинхронной операции?

Для обновления состояния компонента после выполнения асинхронной операции в React используйте useState для хранения состояния и useEffect для выполнения асинхронной операции.

Шаги:

Создайте состояние с помощью useState.
Выполните асинхронную операцию внутри useEffect .
Обновите состояние при завершении асинхронной операции.

Пример:

import React, { useState, useEffect } from "react";

const MyComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch("https://api.example.com/data");
        const result = await response.json();
        setData(result); // Обновление состояния
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };

    fetchData();
  }, []); // Пустой массив зависимостей, чтобы выполнить только при монтировании

  return (
    <div>
      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : "Loading..."}
    </div>
  );
};

export default MyComponent;

Для обновления состояния компонента после асинхронной операции используйте useState для хранения данных и useEffect для выполнения асинхронного запроса и последующего обновления состояния.

Как реализовать асинхронную загрузку компонентов с помощью `React Router`?

Для асинхронной загрузки компонентов в React Router используйте React.lazy и React.Suspense.

Шаги:

Используйте React.lazy для динамического импорта компонента.
Обертайте маршруты в React.Suspense с fallback-контентом.

Пример для React Router 5, использующий Switch и component:

import React, { Suspense, lazy } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

const Home = lazy(() => import("./Home"));
const About = lazy(() => import("./About"));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Suspense>
  </Router>
);

export default App;

Для асинхронной загрузки компонентов с React Router используйте React.lazy для динамического импорта и оборачивайте маршруты в React.Suspense для отображения fallback-контента во время загрузки компонентов.

Какие паттерны для работы с асинхронностью в React?

Паттерны для работы с асинхронностью в React

Использование useEffect:

Выполнение асинхронных операций при монтировании или обновлении компонента.

Пример:

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();
    setData(result);
  };
  fetchData();
}, []);

Использование async/await:

Облегчение работы с асинхронными операциями внутри функций.

Пример:

const fetchData = async () => {
  const response = await fetch('https://api.example.com/data');
  const result = await response.json();
  setData(result);
};

Использование axios:

Библиотека для упрощения HTTP-запросов.

Пример:

import axios from 'axios';

useEffect(() => {
  axios.get('https://api.example.com/data')
    .then(response => setData(response.data))
    .catch(error => console.error(error));
}, []);

Использование React Query:
- Библиотека для управления состоянием асинхронных данных.
- Пример для React Query 3. В TanStack Query 5 используется пакет @tanstack/react-query и объект параметров useQuery:
```
import { useQuery } from 'react-query';

const { data, error, isLoading } = useQuery('data', () =>
  fetch('https://api.example.com/data').then(res => res.json())
);
```

Паттерны для работы с асинхронностью в React включают использование хуков useEffect, синтаксиса async/await, библиотеки axios, и React Query для управления состоянием асинхронных данных.