3 способа получить данные в React: какой лучше?

Автор: Дмитрий Павлютин

Переводчик: Front-end Xiaozhi

Источник: dmitripavlutin.com

Чтобы обеспечить удобочитаемость, в этой статье используется вольный перевод, а не дословный перевод.

При выполнении операции ввода-вывода (например, выборки данных) вы отправляете сетевой запрос, ждете ответа, сохраняете данные ответа в состоянии компонента и, наконец, выполняете рендеринг.

в реакцииметоды жизненного цикла,Hooksа такжеSuspenseэто способ получить данные. Затем используйте примеры, чтобы продемонстрировать, как их использовать, и проиллюстрировать преимущества и недостатки каждого метода, чтобы мы могли лучше писать код асинхронной операции.

1. Запрос данных с использованием методов жизненного цикла

заявлениеEmployees.orgСделайте две вещи:

1. Получите сразу при входе в программу20сотрудники. 2. Сотрудников можно фильтровать по условиям фильтрации.

Прежде чем реализовать эти два требования, давайте рассмотрим компоненты класса React.2Методы жизненного цикла:

1. componentDidMount(): выполнить после монтирования компонента
2. componentDidUpdate(prevProps):когдаpropsилиstateВыполнить при изменении

компоненты<EmployeesPage>Используйте два вышеуказанных метода жизненного цикла для реализации логики приобретения:

import EmployeesList from "./EmployeesList";
import { fetchEmployees } from "./fake-fetch";

class EmployeesPage extends Component {
  constructor(props) {
    super(props);
    this.state = { employees: [], isFetching: true };
  }

  componentDidMount() {
    this.fetch();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.query !== this.props.query) {
      this.fetch();
    }
  }

  async fetch() {
    this.setState({ isFetching: true });
    const employees = await fetchEmployees(this.props.query);
    this.setState({ employees, isFetching: false });
  }

  render() {
    const { isFetching, employees } = this.state;
    if (isFetching) {
      return <div>获取员工数据中...</div>;
    }
    return <EmployeesList employees={employees} />;
  }
}

Открытьcodesandboxможет просматривать<EmployeesPage>процесс приобретения.

<EmployeesPage>Существует асинхронный метод для получения данныхfetch(). После завершения запроса на выборку используйтеsetStateспособ обновленияemployees.

this.fetch()существуетcomponentDidMount()Выполняется в методе жизненного цикла: он получает данные о сотрудниках при первоначальном отображении компонента.

Когда наше ключевое слово будет отфильтровано, оно будет обновленоprops.query. в любое времяprops.queryобновить,componentDidUpdate()будет повторно выполненthis.fetch().

В то время как методы жизненного цикла относительно просты для понимания, методы на основе классов имеют шаблонный код, который затрудняет повторное использование.

преимущество

Этот метод легко понять:componentDidMount()получить данные о первом рендере, аcomponentDidUpdate()существуетpropsОбновлять данные при обновлении.

недостаток

шаблонный код

Компоненты на основе классов требуют наследованияReact.Component, выполняемый в конструктореsuper(props)и т.п.

this

использоватьthisКлючевые слова громоздки.

дублирование кода

componentDidMount()а такжеcomponentDidUpdate()Код в основном дублируется.

сложно повторно использовать

Логику привлечения сотрудников сложно повторно использовать в другом компоненте.

2. Используйте хуки для получения данных

Хуки — лучший выбор для получения данных на основе классов. Как простые функции, хуки не наследуются, как компоненты класса, и их также легче использовать повторно.

Просто помниuseEffect(callback[, deps])Крючки. Этот хук выполняется после монтированияcallback, а когда зависимостьdepsПовторный рендеринг при изменении.

Как показано в следующем примере, в<EmployeesPage>используется вuseEffect()Получить данные о сотруднике:

import EmployeesList from "./EmployeesList";
import { fetchEmployees } from "./fake-fetch";

function EmployeesPage({ query }) {
  const [isFetching, setFetching] = useState(false);
  const [employees, setEmployees] = useState([]);

  useEffect(function fetch() {
    (async function() {
      setFetching(true);
      setEmployees(await fetchEmployees(query));
      setFetching(false);
    })();
  }, [query]);
  
  if (isFetching) {
    return <div>Fetching employees....</div>;
  }
  return <EmployeesList employees={employees} />;
}

Открытьcodesandboxможет просматриватьuseEffect()Как получить данные.

Вы можете увидеть использование хуков<EmployeesPage>Гораздо проще, чем использовать компоненты класса.

существует<EmployeesPage>в функциональном компонентеuseEffect(fetch， [query]), выполняется после первоначального рендерингаfetchПерезвоните. Кроме того, когда зависимостиqueryОн также будет повторно выполнен при обновленииfetchметод .

Но возможности для оптимизации еще есть. Крючки позволяют нам<EmployeesPage>Извлеките логику привлечения сотрудников из компонента, давайте посмотрим:

import React, { useState } from 'react';

import EmployeesList from "./EmployeesList";
import { fetchEmployees } from "./fake-fetch";

function useEmployeesFetch(query) { // 这行有变化
  const [isFetching, setFetching] = useState(false);
  const [employees, setEmployees] = useState([]);

  useEffect(function fetch {
    (async function() {
      setFetching(true);
      setEmployees(await fetchEmployees(query));
      setFetching(false);
    })();
  }, [query]);

  return [isFetching, employees];
}

function EmployeesPage({ query }) {
  const [employees, isFetching] = useEmployeesFetch(query); // 这行有变化
  
  if (isFetching) {
    return <div>Fetching employees....</div>;
  }
  return <EmployeesList employees={employees} />;
}

отuseEmployeesFetch()Укажите желаемое значение. компоненты<EmployeesPage>Соответствующей логики сбора нет, и он отвечает только за отрисовку интерфейса.

Более того, его можно повторно использовать в любом другом компоненте, который должен привлечь сотрудников.useEmployeesFetch().

преимущество

ясно и просто

У хуков нет стандартного кода, потому что они являются обычными функциями.

возможность повторного использования

Логику извлечения, реализованную в Hooks, легко использовать повторно.

недостаток

Требуются предварительные знания

Хуки немного нелогичны, поэтому вы должны понять их, прежде чем использовать. Хуки полагаются на замыкания, поэтому обязательно хорошо их поймите.

необходимость

С хуками вам все равно придется использовать императивный подход для выполнения выборки данных.

3. Используйте саспенс для получения данных

SuspenseПредоставляет декларативный способ асинхронного получения данных в React.

Примечание. По состоянию на ноябрь 2019 года приостановка является экспериментальной.

<Suspense>Оберните компонент, выполняющий асинхронные операции:

<Suspense fallback={<span>Fetch in progress...</span>}>
  <FetchSomething />
</Suspense>

Когда данные получены,SuspenseпокажетfallbackСодержание в , когда данные получены,Suspenseбудет использовать полученные данные для рендеринга<FetchSomething />.

Давайте посмотрим, как использоватьSuspense:

import React, { Suspense } from "react";
import EmployeesList from "./EmployeesList";

function EmployeesPage({ resource }) {
  return (
    <Suspense fallback={<h1>Fetching employees....</h1>}>
      <EmployeesFetch resource={resource} />
    </Suspense>
  );
}

function EmployeesFetch({ resource }) {
  const employees = resource.employees.read();
  return <EmployeesList employees={employees} />;
}

Открытьcodesandboxможет просматриватьSuspenseКак получить данные.

<EmployeesPage>использоватьSuspenseКомпонент обработки получит данные и передаст их в<EmployeesFetch>компоненты.

<EmployeesFetch>серединаresource.employeesэто специальный пакетpromise, который находится заSuspenseобщаться. так,SuspenseПросто знай "висеть"<EmployeesFetch>сколько времени займет рендеринг, и когда ресурс будет готов, начнется работа по рендерингу.

Самые большие преимущества:SuspenseОбрабатывайте асинхронные операции декларативным и синхронным образом. Компоненты не имеют сложной логики выборки данных, но декларативно используют ресурсы для рендеринга контента. Нет жизненного цикла внутри компонентов, нет хуков,async/await, без обратного вызова: просто показать интерфейс.

преимущество

декларативный

SuspenseВыполняйте асинхронные операции в React декларативно.

Простой

Декларативный код прост в использовании, эти компоненты не имеют сложной логики выборки данных.

Слабая связь и реализация приобретения

использоватьSuspenseКомпоненты не видят, как получить данные: использование отдыха или графаQL.SuspenseУстанавливает границу для защиты сведений о доступе от утечки в компонент.

Стандартный статус

Если запрашивается несколько операций получения, тоSuspenseБудет использован последний запрос на выборку.

оригинал:Рисовое путешествие avlutin.com/react-fetch…

4. Резюме

Долгое время подход на основе жизненного цикла был единственным способом получения решений для данных. Тем не менее, они используют много стандартного кода для получения данных, воспроизводимости и повторного использования аспектов проблемы.

Получение данных с помощью хуков — лучший выбор: меньше кода шаблона.

SuspenseПреимущество заключается в декларативной выборке. Наши компоненты не будут загромождены получением деталей реализации.SuspenseГораздо ближе к декларативной природе самого React.

Ошибки, которые могут существовать после развертывания кода, нельзя узнать в режиме реального времени.Чтобы решить эти ошибки впоследствии, много времени тратится на отладку логов.Кстати, всем рекомендую полезный инструмент мониторинга ошибок.Fundebug.

оригинал:Рисовое путешествие avlutin.com/react-fetch…

общаться с

Все говорили, что нет проекта для написания резюме, поэтому я помог вам найти проект, и это было с бонусом.【Учебник по строительству】.

Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.