Перехватчики React, параллельный режим, компоненты высшего порядка и многое другое
React хорошо известен созданием интерактивных и богатых компонентов пользовательского интерфейса. Более того, эти компоненты зависят от получения данных из API.
Как разработчики, мы можем использовать различные методы выборки данных для передачи данных для этих компонентов. Но оценивали ли вы когда-нибудь выбранные вами методы по сравнению с другими доступными вариантами?
В этой статье мы обсудим различные методы получения данных для React. В конце концов, вы сможете выбрать лучший подход, исходя из требований приложения.
1. Fetch-API
Fetch API - это упрощенный интерфейс для получения данных на основе обещаний. Кроме того, Fetch API проще в использовании по сравнению с XMLHttpRequest.
Fetch API - это JavaScript API с базовыми функциями для обработки объектов запроса и ответа. Вы также можете протестировать его на консоли своего браузера, поскольку все браузеры его поддерживают. Следующие ниже фрагменты кода показывают простой пример использования Fetch API на практике.
fetchEmployeesFetchAPI = () => {
this.setState({...this.state, isFetching: true});
fetch("https://domain.in/api/employees")
.then(response => response.json())
.then(result=> {
this.setState({employees: result, isFetching: false})
})
.catch(exception => {
console.log(exception);
this.setState({...this.state, isFetching: false});
});
};
fetchEmployees = this.fetchEmployeesFetchAPI;
Однако у Fetch API также есть несколько недостатков, таких как запрет отмены запросов и тайм-аутов запросов, невозможность перехвата HTTP-запросов и т. Д.
Большинство этих проблем решаются в автономном стороннем пакете Axios. Давайте посмотрим, как мы можем использовать Axios в проекте React.
2. Axios
Хотя Axios является сторонней библиотекой, она является идеальной заменой Fetch API, если вам требуется больший контроль и удобство при извлечении данных.
Он должным образом задокументирован, прост и предлагает отличный опыт разработки.
Подобно Fetch API, Axios также возвращает обещание JS. Но нет необходимости выполнять обещание дважды, как Fetch API, поскольку Axios всегда возвращает ответ JSON.
Часть кодирования аналогична Fetch API, за исключением уменьшения количества шагов и лучшей обработки ошибок. Давайте посмотрим, как мы можем реализовать тот же пример с помощью Axios:
fetchEmployeesAxios = () => {
this.setState({...this.state, isFetching: true});
axios.get("https://domain.in/api/employees")
.then(response => {
this.setState({employees: response.data, isFetching: false})
})
.catch(exception => {
console.log(exception);
this.setState({...this.state, isFetching: false});
});
};
fetchEmployees = this.fetchEmployeesAxios;
Но вы можете подумать, что оба эти метода кажутся слишком сложными со всеми этими обещаниями, обрабатываемыми с помощью блоков then () и catch (). Так есть ли способ еще больше его упростить?
Мы можем уменьшить сложность кода, переключившись на Async / Await.
Давайте реструктурируем приведенный выше фрагмент кода с помощью async / await.
async fetchEmployeesAsync() {
try {
this.setState({...this.state, isFetching: true});
const response = await axios.get("https://domain.in/api/employees");
this.setState({employees: response.data, isFetching: false});
}
catch (exception) {
console.log(exception);
this.setState({...this.state, isFetching: false});
}
};
fetchEmployees = this.fetchEmployeesAsync;
До сих пор я обсуждал 2 основных метода получения данных в React. Теперь пора перейти к другим областям, связанным со сбором данных.
Совет: создавайте отличные дизайн-системы и микро-интерфейсы
Выведите фронтенд-разработку на новый уровень с помощью независимых компонентов. Создавайте и совместно работайте над приложениями на основе компонентов, чтобы легко разблокировать Micro Frontend и обмениваться компонентами.
Инструменты OSS, такие как Bit, предлагают отличный опыт разработки для создания и компоновки независимых компонентов, а также создания в одиночку или вместе с вашей командой.
3. Получение данных в компонентах более высокого порядка
Компоненты более высокого порядка - это сложные компоненты, которые обязаны получать данные и распределять их по дочерним компонентам.
Эти компоненты могут быть вложены неявно, а некоторые дочерние компоненты могут использовать разные представления извлеченных данных. Кроме того, некоторые компоненты иерархической структуры могут вообще не нуждаться в данных.
Более того, это лучшая практика, появившаяся в системах проектирования, где компоненты, извлекающие данные, отделяются от тех, которые их отображают.
В следующем примере показано, как реализовать выборку данных с помощью компонентов более высокого порядка:
import React, {Component} from 'react'
import EmployeeComponent from "./EmployeeComponent";
class EmployeeHOC extends Component {
constructor(props) {
super(props);
this.state = {
isFetching: false,
employees: []
};
}
render = () => < EmployeeComponent data = {
this.state.employees
}
isFetching = {
this.state.isFetching
}
/>;
componentDidMount() {
this.fetchEmployees();
}
fetchEmployees= [...]
}
export default EmployeeHOC
Во-первых, выборка данных и логика состояния должны быть объединены в компонент более высокого порядка. Затем метод componentDidMount() вызовет метод fetchEmployees(), а метод render() передаст состояние исключительно дочернему компоненту, что EmployeeComponentin в данном случае.
Дочерний компонент не будет заботиться ни о чем, например, методах жизненного цикла, получении данных или обработке ошибок, и будет сосредоточен только на извлечении данных в реквизитах и их рендеринге.
import React from 'react'
const EmployeeComponent = (props) => {
return (
<div>
{
this.props.data.map( employee =>
<div>{employee}</div>)
}
</div>
)};
export default EmployeeComponent
Помимо выборки данных, компоненты более высокого порядка также несут ответственность за визуализацию своих дочерних компонентов напрямую и за реакцию на события, исходящие от этих дочерних компонентов.
Поэтому важно понимать, что компоненты более высокого порядка могут в некоторых случаях вызывать неожиданные проблемы, которые можно решить с помощью Render-props.
4. Получение данных в Render-props
Компоненты Render prop в React - это альтернативный тип компонентов более высокого порядка.
Подобно компонентам более высокого порядка, компоненты опоры рендеринга также могут использоваться для декларативной выборки данных.
Основная концепция рендеринга реквизита - передать опору компоненту как функцию. Затем опора будет выполнена объектом-получателем, который часто используется в методе render(), названном таким образом опорой рендеринга.
import {Component} from 'react'
import axios from 'axios'
class EmployeeRenderProps extends Component {
constructor(props) {
super(props);
this.state = {
isFetching: false,
employees: []
};
}
render = () => this.props.children(this.state);
componentDidMount() {
this.fetchEmployees();
}
fetchEmployees= [...]
}
export default EmployeeRenderProps;
Код EmployeeRenderProps полностью идентичен коду EmployeeHOC. Основное несоответствие заключается в методе render (), который вызывает свой props.children (). Поскольку этот компонент не требует больших знаний о своих дочерних элементах, это увеличивает степень абстракции.
Код рендеринга реквизита полностью идентичен коду выборки данных компонентов более высокого порядка, который мы обсуждали ранее. Основное отличие заключается в методе render(), где мы вызываем его props.children() вместо того, чтобы оборачивать компонент более высокого порядка.
Использование свойств рендеринга для выборки данных рекомендуется в сценариях, где у вас есть глубокая иерархия компонентов.
5. Получение данных с помощью React Hooks
Хотя свойства рендеринга решают проблемы в компонентах более высокого порядка, оба эти метода требуют от вас реструктуризации иерархии компонентов. Но с React Hooks вам не нужно вносить много изменений в структуру компонентов.
React Hooks был представлен с обновлением React 16.8 и положил конец использованию компонентов класса для выборки данных, что было многословным и сложным подходом.
Как мы все знаем, useState() Hook вызывается с начальным состоянием. И он используется в функциональных компонентах для сохранения локальных состояний. Точно так же эффект Hook используется для предложений выборки данных, он принимает одну функцию и по умолчанию запускает ее после каждого рендеринга.
В следующем примере показано, как мы можем использовать useEffect() Hook с Axios для получения данных.
import React, {useEffect, useState} from 'react';
import axios from "axios";
import EmployeeComponent from "./EmployeeComponent";
function EmployeeReactHooks() {
const [data, setData] = useState({
employees: [],
isFetching: false
});
useEffect(() => {
const fetchEmployees = async () => {
try {
setData({employees: data.employees, isFetching: true});
const response = await axios.get("https://domain.in/api/employees");
setData({employees: response.data, isFetching: false});
}catch (exception) {
console.log(exception);
setData({employees: data.employees, isFetching: false});
}
};
fetchEmployees();
}, []);
return (....)
}
export default EmployeeReactHooks
6. Параллельный режим и приостановка
Если вы следите за последними новостями о React, то, скорее всего, уже знаете о Concurrent Mode.
Параллельный режим - это набор новых функций, которые можно использовать в приложениях React, чтобы они реагировали и были активны в зависимости от возможностей устройства пользователя.
В параллельном режиме приостановка - это метод, который позволяет компонентам рассматривать что угодно как резервное решение, ожидая завершения некоторого длительного процесса.
Suspense - это не библиотека для выборки данных. Это метод для библиотек выборки данных, позволяющий взаимодействовать с React независимо от того, недоступны ли данные, которые читает компонент.
<Suspense fallback={<p>loading...</p>}>
<EmployeeComponent/>
</Suspense>
В приведенном выше примере EmployeeComponent заключен в компонент Suspense, у которого есть резервная опора. React отображает <p>loading…</p> в DOM, если EmployeeComponent ожидает выполнения асинхронной задачи, например, извлечения сведений о сотрудниках из API.
Но обратите внимание, что функция Concurrent Mode все еще находится на экспериментальной стадии.
Последние мысли
В этой статье мы обсудили несколько техник и методов получения данных в React, и я думаю, что теперь вы хорошо их понимаете.
Итак, какой метод получения данных лучше всего подходит для вашего приложения React?
Ответ на этот вопрос полностью зависит от вас, в зависимости от сложности вашего проекта и требований.
Но если вы начинаете новый проект React, я предлагаю вам использовать React Hooks, Concurrent Mode и Axios, что упрощает работу.
Спасибо за чтение !!!
