Оптимизация запросов к серверу с помощью React Hooks
Введение
Как разработчик React, вы устали бороться с плохо управляемыми серверными запросами? Не смотрите дальше; React Hooks — это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие функции React в функциональных компонентах и может помочь оптимизировать запросы к серверу и вывести производительность вашего веб-приложения на новый уровень.
Вы можете подумать: «Что такого особенного в запросах к серверу? Почему они имеют значение? Что ж, позвольте мне сказать вам — запросы к серверу играют решающую роль в определении пользовательского опыта. Плохо управляемые запросы к серверу могут привести к медленной загрузке, снижению производительности и неприятному пользовательскому опыту. React Hooks обеспечивает способ эффективного и организованного управления запросами к серверу, что приводит к ускорению загрузки, повышению производительности и улучшению взаимодействия с пользователем.
Из этого руководства вы узнаете, как использовать React Hooks для повышения производительности запросов к серверу, более эффективного управления запросами к серверу и создания более оптимизированных веб-приложений.
К концу этого руководства вы получите четкое представление о том, как использовать React Hooks для оптимизации запросов к серверу, и сможете реализовать эти методы в своих проектах для повышения производительности и удобства использования ваших веб-приложений.
Предпосылки:
Чтобы следовать этому руководству, у вас должно быть:
- Понимание JavaScript и настройка приложения React с нуля.
- Знакомство с React Hooks.
- Знание того, как выполнять запросы к серверу на JavaScript.
- Рабочая среда разработки.
- Редактор кода.
Кроме того, было бы полезно иметь некоторый опыт работы с API и понимание принципов RESTful.
Если вы новичок в оптимизации запросов к серверу, не волнуйтесь — это руководство предназначено для разработчиков с любым уровнем опыта. Возможно, вам потребуются дополнительные исследования и эксперименты, если вы еще не знакомы с этими концепциями. Но не волнуйтесь; Проявив немного терпения и практики, вы сможете в кратчайшие сроки овладеть искусством оптимизации запросов к серверу! Итак, давайте начнем и повысим производительность вашего приложения React.
Настройка нового проекта React
Настройка нового проекта React может оказаться непростой задачей для начинающих разработчиков, но с помощью инструмента Create React App (CRA) она становится проще, чем когда-либо. CRA — это популярный инструмент с интерфейсом командной строки, который автоматизирует процесс установки нового проекта React, предоставляя среду разработки, оптимизированную для создания приложений React. Вы можете следовать этому руководству, чтобы узнать, как настроить приложение React с нуля.
TL;TR
Чтобы создать проект React, на вашем компьютере должны быть установлены Node.js и npm. Если у вас их еще нет, вы можете скачать их с официального сайта Node.js. После установки этих инструментов откройте терминал или командную строку в каталоге, в котором вы хотите создать приложение, и используйте следующую команду для создания нового проекта React:
npx create-react-app digital-ocean-tutorial
Если приложение успешно создано, будет отображен следующий вывод:
...
Success! Created digital-ocean-tutorial at your_file_path/digital-ocean-tutorial
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd digital-ocean-tutorial
npm start
Happy hacking!
При этом будет создан новый каталог с тем же именем, что и у вашего проекта, содержащий все необходимые файлы для вашего нового проекта React.
После завершения процесса установки перейдите в новый каталог проекта React, выполнив следующую команду:
cd digital-ocean-tutorial
Затем выполните следующую команду, чтобы запустить сервер разработки:
npm start
Если все сделано правильно, сервер должен запуститься, и будет отображен следующий вывод:
Compiled successfully!
You can now view digital-ocean-tutorial in the browser
http://localhost:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
Это запустит ваш новый проект React в веб-браузере по умолчанию. Теперь вы увидите сообщение «Добро пожаловать в React», что означает, что ваш проект настроен правильно и готов к созданию следующего замечательного приложения!
С CRA вы сможете сосредоточиться на написании кода, не беспокоясь о настройке и настройке среды разработки.
Теперь, когда у вас есть запущенный проект React, давайте рассмотрим различные способы оптимизации запросов к серверу с помощью перехватчиков React.
Синхронизируйте компоненты с помощью хука UseEffect
Хук useEffect в React позволяет разработчикам синхронизировать компонент с внешней системой, например сервером, путем обработки побочных эффектов, таких как выборка данных, эффективным и простым для понимания способом. Одним из наиболее распространенных вариантов использования перехватчика useEffect является выполнение запросов к серверу и обновление состояния компонента.
Один из способов использования ловушки useEffect для запросов к серверу — вызвать функцию, которая выполняет запрос внутри ловушки useEffect. Функция должна использовать Fetch API или такую библиотеку, как Axios, для выполнения запроса, а затем обновлять состояние компонента данными ответа с помощью ловушки setState.
Давайте рассмотрим пример использования перехватчика useEffect для получения данных из API-заполнителя JSON и обновления состояния компонента. Перейдите к файлу app.js в папке src вашего проекта, удалите код по умолчанию и замените его приведенным ниже фрагментом кода:
import React, { useEffect, useState } from 'react';
function MyComponent() {
const [data, setData] = useState([]);
useEffect(() => {
async function fetchData() {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
const data = await response.json();
setData(data);
}
fetchData();
}, []);
return (
<div>
{data.map((item) => (
<div key={item.id}>
<h2>- {item.title}</h2>
<p>{item.body}</p>
</div>
))}
</div>
);
}
export default MyComponent
В приведенном выше примере хук useEffect вызывается с пустым массивом зависимостей, то есть он будет работать только при первоначальном рендеринге компонента. Состояние компонента инициализируется пустым массивом, а функция fetchData вызывается внутри хука useEffect для выполнения запроса к серверу и обновления состояния с помощью данных ответа.
Если вы обновите браузер или приложение, вы сможете увидеть результат запроса, сделанного в приведенном выше примере кода, как показано на рисунке ниже:
Важно отметить, что ненужные повторные рендеринги могут вызвать проблемы с производительностью, поэтому рекомендуется минимизировать количество повторных рендерингов, вызванных хуком useEffect. Один из способов сделать это — включить в массив зависимостей только реквизиты и переменные состояния, используемые перехватчиком.
Правильная обработка ошибок при отправке запросов к серверу также важна, чтобы избежать поломки компонента. Обработку ошибок можно выполнить, добавив блок try-catch внутри функции fetchData и используя хук setError для обновления состояния компонента сообщением об ошибке. Таким образом, приложение может отображать пользователю сообщение об ошибке, если что-то пойдет не так.
Следуя лучшим практикам, вы сможете с уверенностью отправлять запросы к серверу в компоненте React и улучшать взаимодействие с пользователем.
Оптимизация производительности серверных запросов с помощью хука useMemo
Хук useMemo в React — это инструмент оптимизации производительности, который позволяет разработчикам запоминать данные, сохраняя результаты вычислений, чтобы их можно было использовать повторно без необходимости повторять процесс. Это может быть особенно полезно при работе с запросами к серверу, поскольку позволяет избежать ненужных повторных рендерингов и повысить производительность компонента.
Один из способов использования перехватчика useMemo в контексте запроса сервера — это запоминать данные, возвращаемые с сервера, и использовать их для обновления состояния компонента. Это можно сделать, вызвав хук useMemo внутри хука useEffect и передав данные сервера в качестве первого аргумента, а также массив зависимостей в качестве второго аргумента. Массив зависимостей должен включать все реквизиты или переменные состояния, используемые для расчета запоминаемых данных.
Чтобы попробовать этот метод с помощью хука useMemo для запоминания данных из API-заполнителя JSON и обновления состояния компонента, замените код в app.js на фрагмент кода ниже:
import { useEffect, useState, useMemo } from 'react';
function MyComponent({ postId }) {
const [data, setData] = useState({});
useEffect(() => {
async function fetchData() {
const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`);
const data = await response.json();
setData(data);
}
fetchData();
}, [postId]);
const title = useMemo(() => data.title, [data]);
return (
<div>
<h2>{title}</h2>
</div>
);
}
export default MyComponent
В приведенном выше примере хук useEffect вызывается с postId в качестве массива зависимостей, что означает, что он будет запускаться всякий раз, когда изменяется свойство postId. Состояние компонента инициализируется пустым объектом, затем внутри хука useEffect вызывается функция fetchData для выполнения запроса к серверу и обновления состояния данными ответа. Внутри компонента мы используем хук useMemo для запоминания заголовка, передавая data.title в качестве первого аргумента и [data] в качестве второго. аргумент, чтобы при каждом изменении данных title обновлялся.
Ниже приведен результат запроса в приведенном выше примере кода:
Обратите внимание, что useMemo не всегда необходим и его следует использовать только в том случае, если компонент зависит от некоторых свойств или состояния, которые могут часто меняться, а вычисления требуют больших затрат. Неправильное использование useMemo может привести к утечкам памяти и другим проблемам с производительностью.
Управление состоянием запроса сервера с помощью хука useReducer
Хук useReducer в React похож на хук useState, но позволяет осуществлять более сложное и предсказуемое управление состоянием. Вместо непосредственного обновления состояния useReducer позволяет отправлять действия, описывающие обновление состояния, и функцию редуктора, которая обновляет состояние на основе действия отправки.
Одним из преимуществ использования перехватчика useReducer для управления запросами к серверу является лучшее разделение задач. Вместо того, чтобы логика обработки запросов сервера была разбросана по всему компоненту, ее можно инкапсулировать в функцию редуктора, что упрощает понимание и поддержку кода компонента.
Чтобы попробовать этот метод с использованием перехватчика useReducer для запоминания данных из API-заполнителя JSON и обновления состояния компонента, замените код в app.js на фрагмент кода ниже:
import { useReducer } from 'react';
const initialState = { data: [], loading: false, error: '' };
const reducer = (state, action) => {
switch (action.type) {
case 'FETCH_DATA_REQUEST':
return { ...state, loading: true };
case 'FETCH_DATA_SUCCESS':
return { ...state, data: action.payload, loading: false };
case 'FETCH_DATA_FAILURE':
return { ...state, error: action.payload, loading: false };
default:
return state;
}
};
function MyComponent() {
const [state, dispatch] = useReducer(reducer, initialState);
const fetchData = async () => {
dispatch({ type: 'FETCH_DATA_REQUEST' });
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
const data = await response.json();
dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
} catch (error) {
dispatch({ type: 'FETCH_DATA_FAILURE', payload: error.message });
}
};
return (
<div>
{state.loading ? (
<p>Loading...</p>
) : state.error ? (
<p>{state.error}</p>
) :
<div>
{state.data.map((item) => (
<div key={item.id}>
<h2>{item.title}</h2>
<p>{item.body}</p>
</div>
))}
</div>
)}
<button onClick={fetchData}>Fetch Data</button>
</div>
);
}
export default MyComponent
В представленном фрагменте кода хук useReducer вызывается с помощью функции редуктора, а начальное состояние передается в качестве аргументов. Состояние компонента инициализируется пустым массивом в качестве данных, переменной загрузки, установленной в значение false, и пустой переменной сообщения об ошибке. При нажатии кнопки «Извлечь данные» выполняется функция fetchData, которая отправляет действия в ответ на статус запроса, который может быть успешным или неудачным.
Ниже приведен результат запроса, сделанного в приведенном выше примере кода:
Более того, хук useReducer позволяет более эффективно управлять сложными состояниями. Используя действия и редукторы для обновления состояния, становится проще справляться с воздействием различных действий на разные части состояния, что упрощает добавление новых функций и устранение неполадок в приложении.
Исходный код работающего приложения, использующего описанные выше методы, можно найти в этом репозитории GitHub.
Заключение
Таким образом, в этом руководстве рассмотрены основы оптимизации запросов к серверу с помощью React Hooks. React Hooks — это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие функции React в функциональных компонентах. С помощью хуков useEffect, useMemo и useReducer вы можете легко управлять и оптимизировать запросы к серверу, что приводит к сокращению времени загрузки, повышению производительности и лучший пользовательский опыт для ваших пользователей. Вы можете улучшить производительность и удобство работы пользователей в своих веб-приложениях, следуя методам, продемонстрированным в этом руководстве.
Теперь ваша очередь опробовать эти методы в своих проектах. В качестве следующего шага вы можете изучить более сложные темы, такие как нумерация страниц и кеширование. Помните, что React Hooks — это постоянно развивающаяся технология, поэтому следите за последними обновлениями и передовыми практиками, чтобы продолжать оптимизировать запросы к серверу.