Полезные видео о фронтенде. Подпишись на Rutube

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

2 года назад·3 мин. на чтение

Быстрый старт с useImperativeHandle

В этой статье будет показано, как вызвать метод дочернего компонента с помощью ссылки. Чтобы решить эту проблему, мы будем использовать хуки useRef и useImperativeHandle.

Дочерний компонент

Начнем с простого дочернего компонента, в котором содержится кнопка. Нажатие на кнопку вызывает внутренний метод doSomething.

// Child.jsx

function Child(props, ref) {
  const doSomething = () => {
    console.log("do something");
  };
  return (
    <div>
      <h1>Child Component</h1>
      <button onClick={doSomething}>Run</button>
    </div>
  );
}

export default Child;

Родительский компонент

Далее рассмотрим родительский компонент. В нем используется дочерний компонент, описанный выше. Обратите внимание, что в родительском компоненте есть собственная кнопка сохранения.

// App.jsx

import Child from "./Child";

function App() {
  const save = () => {};
  return (
    <div>
      <Child />
      <button onClick={save}>Save</button>
    </div>
  );
}

export default App;

Хук `useImperativeHandle`

Теперь давайте сосредоточимся на нашей задаче. Мы хотим вызвать метод (doSomething) дочернего компонента при нажатии кнопки (Save) из родительского компонента. Чтобы вызвать метод из дочернего компонента, нам нужно сначала выставить его наружу. useImperativeHandle определяет значение объекта, которое предоставляется родительскому компоненту при использовании ref. Добавляя наш метод к этому объекту, мы делаем его доступным в родительских компонентах.

// Child.jsx

import { useImperativeHandle } from "react";

function Child(props, ref) {
  const doSomething = () => {
    console.log("do something");
  };

  useImperativeHandle(ref, () => ({ doSomething }));

  return (
    <div>
      <h1>Child Component</h1>
      <button onClick={doSomething}>Run</button>
    </div>
  );
}
export default Child;

useImperativeHandle следует использовать с forwardRef.

forwardRef позволяет родительскому компоненту передавать ссылки своим дочерним элементам. Чтобы прикрепить функции или поля к этой ссылке (к рефу), используется хук useImperativeHandle.

// Child.jsx

import { forwardRef, useImperativeHandle } from "react";

function Child(props, ref) {
  const doSomething = () => {
    console.log("do something");
  };

  useImperativeHandle(ref, () => ({ doSomething }));

  return (
    <div>
      <h1>Child Component</h1>
      <button onClick={doSomething}>Run</button>
    </div>
  );
}

export default forwardRef(Child); // Child обернут в forwardRef

На этом этапе мы можем создать ссылку в родительском компоненте с помощью хука useRef и передать ее дочернему компоненту. Получив эту ссылку, мы можем вызвать метод doSomething дочернего компонента.

// App.jsx

import { useRef } from "react";
import Child from "./Child";

function App() {
  const childRef = useRef(null);

  const save = () => {
    if (childRef.current) {
      childRef.current.doSomething();
    }
  };

  return (
    <div>
      <Child ref={childRef} />
      <button onClick={save}>Save</button>
    </div>
  );
}

export default App;

Добавим TypeScript

Далее посмотрим, какие изменения нужно сделать, чтобы вызвать тот же дочерний метод из родительского компонента при использовании TypeScript. Во-первых, нам нужно определить новый интерфейс, содержащий метод, который будет представлен.

export interface RefType {
  doSomething: () => void;
}

Затем новый тип (RefType) используется при получении ссылки в дочернем компоненте.

function Child(props: PropsType, ref: Ref<RefType>)

Ниже приведен полный код дочернего компонента.

// Child.jsx

import { forwardRef, useImperativeHandle, Ref } from "react";

export interface PropsType {}
export interface RefType {
  doSomething: () => void;
}

function Child(props: PropsType, ref: Ref<RefType>) {
  const doSomething = () => {
    console.log("do something");
  };
  useImperativeHandle(ref, () => ({ doSomething }));
  return (
    <div>
      <h1>Child Component</h1>
      <button onClick={doSomething}>Run</button>
    </div>
  );
}

export default forwardRef(Child);

В родительский компонент нам нужно импортировать этот RefType, содержащий все публичные дочерние методы, и использовать его при создании ref.

// App.jsx

import Child, { RefType } from "./Child";
//...
const childRef = useRef<RefType>(null);

Полный код родительского компонента.

import { useRef } from "react";
import Child, { RefType } from "./Child";

function App() {
  const childRef = useRef<RefType>(null);

  const save = () => {
    if (childRef.current) {
      childRef.current.doSomething();
    }
  };

  return (
    <div>
      <Child ref={childRef} />
      <button onClick={save}>Save</button>
    </div>
  );
}

export default App;

Frontend React React hooks

Новые клиентские хуки React 19

10 месяцев назад·9 мин. на чтение

Обзор и анализ ключевых обновлений и функциональности новых клиентских хуков в React 19

Вопреки распространенному мнению, основная команда React сосредоточена не только на компонентах React Server и Next.js. Новые хуки на стороне клиента появятся в следующей основной версии React, React 19. Они сосредоточены на двух основных точках React: получение данных и формы. Эти хуки повысят производительность разработчиков React, включая тех, кто работает с SPA. Новые хуки:

use(Promise)
use(Context)
Form Actions
useFormState
useFormStatus
useOptimistic
Async transitions (Асинхронные переходы)

Примечание: Эти хуки доступны только в канареечных и экспериментальных релизах React. Они должны стать частью предстоящего React 19, но API может измениться до финального релиза.

`use(Promise)`

Этот новый хук является официальным API для приостановки на клиенте. Вы можете передать ему обещание, и React приостановится на нем до тех пор, пока промис не зарезолвится. Базовый синтаксис, взятый из документации по use React, выглядит следующим образом:

import { use } from 'react';

function MessageComponent({ messagePromise }) {
  const message = use(messagePromise);
  // ...
}

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

import { useState, use, Suspense } from 'react';

let news = ['news1', 'news2'];

const fetchNews = () => {
  return new Promise<string[]>((resolve) =>
    // имитация запроса данных
    setTimeout(() => {
      news = [...news, `news${news.length + 1}`];
      resolve(news);
    }, 500)
  );
}

const News = ({ newsPromise }) => {
  const news = use<string[]>(newsPromise);
  return (
    <ul>
      {news.map((title, index) => (
        <li key={index}>{title}</li>
      ))}
    </ul>
  );
};

export const App = () => {
  const [newsPromise, setNewsPromise] = useState(
    () => fetchNews()
  );

  const handleUpdate = () => {
    fetchNews().then((news) => {
      setNewsPromise(Promise.resolve(news));
    });
  };

  return (
    <>
      <button onClick={handleUpdate}>Обновить</button>
      <Suspense fallback={<p>Запрос данных...</p>}>
        <News newsPromise={newsPromise} />
      </Suspense>
    </>
  );
};

В ранних версиях было бы получено предупреждение, связанное с <Suspense>, т.к. требовалось чтобы компонент был lazy-loaded:

Suspense-enabled data fetching without the use of an opinionated framework is not yet supported.

Что ж, это уже не относится к React 19. Этот новый хук use имеет скрытую силу: в отличие от всех других хуков React, use может быть вызван в циклах и условных операторах, таких как if. Означает ли это, что нам больше не нужно использовать стороннюю библиотеку, такую как TanStack Query, для получения данных на стороне клиента? Что ж, это еще предстоит выяснить, поскольку Tanstack Query делает больше, чем просто разрешает Promise. Но это большой шаг в правильном направлении, и он упростит создание одностраничных приложений на основе REST API или GraphQL. Подробнее о хуке use(Promise).

`use(Context)`

Тот же use может быть использован для чтения React Context. Он точно такой же, как useContext, за исключением того, что его можно вызывать в циклах и условных операторах, таких как if.

import { use } from 'react';

function HorizontalRule({ show }) {
  if (show) {
    const theme = use(ThemeContext);
    return <hr className={theme} />;
  }
  return false;
}

Это упростит иерархию компонентов для некоторых случаев, так как единственным способом чтения контекста в цикле или условном выражении было разделение компонента на две части. Это также большая эволюция с точки зрения производительности, так как теперь вы можете условно пропустить повторный рендеринг компонента, даже если контекст изменился. Подробнее о use(Context).

Form Actions

Эта новая функциональность позволяет передавать проп action в <form>. React вызовет эту функцию, когда форма будет отправлена:

<form action="{handleSubmit}" />

Помните, что если вы добавите <form action> в React 18, вы получите следующее предупреждение:

Warning: Invalid value for prop action on <form> tag. Either remove it from the element or pass a string or number value to keep it in the DOM.

Это больше не касается React 19, где вы можете написать форму следующим образом:

import { useState } from 'react';

const AddToCartForm = ({ id, title, addToCart }) => {
  const formAction = async (formData) => {
    try {
      await addToCart(formData, title);
    } catch (e) {
      // ошибка
    }
  };

  return (
    <form action={formAction}>
      <h2>{title}</h2>
      <input type="hidden" name="itemID" value={id} />
      <button type="submit">Добавить в корзину</button>
    </form>
  );
};

type Item = {
  id: string;
  title: string;
};

const Cart = ({ cart }: { cart: Item[] }) => {
  if (cart.length == 0) {
    return null;
  }
  return (
    <>
      Корзина:
      <ul>
        {cart.map((item, index) => (
          <li key={index}>{item.title}</li>
        ))}
      </ul>
      <hr />
    </>
  );
};

export const App = () => {
  const [cart, setCart] = useState<Item[]>([]);

  const addToCart = async (formData: FormData, title) => {
    const id = String(formData.get('itemID'));
    // имитация запроса
    await new Promise(
      (resolve) => setTimeout(resolve, 1000)
    );
    setCart((cart: Item[]) => [...cart, { id, title }]);

    return { id };
  };

  return (
    <>
      <Cart cart={cart} />
      <AddToCartForm
        id="1"
        title="JavaScript: The Definitive Guide"
        addToCart={addToCart}
      />
      <AddToCartForm
        id="2"
        title="JavaScript: The Good Parts"
        addToCart={addToCart}
      />
    </>
  );
};

Функция addToCart не является серверным действием. Она вызывается на стороне клиента и может быть асинхронной функцией. Это значительно упростит обработку AJAX-форм в React - например, в форме поиска. Но опять же, этого может быть недостаточно, чтобы избавиться от сторонних библиотек, таких как React Hook Form, которые делают гораздо больше, чем просто обрабатывают отправку форм (проверка, побочные эффекты и т.д.). В приведенном выше примере вы можете найти некоторые проблемы с юзабилити (кнопка отправки не отключена при отправке, отсутствует сообщение с подтверждением, позднее обновление корзины). К счастью, в этом случае появляется все больше хуков. Подробнее о <form action>.

`useFormState`

Этот новый хук призван помочь с асинхронным form action, описанным выше. Вызовите useFormState, чтобы получить доступ к возвращаемому значению действия с момента последней отправки формы.

import { useFormState } from 'react-dom';
import { action } from './action';

function MyComponent() {
  const [state, formAction] = useFormState(action, null);
  // ...
  return <form action={formAction}>{/* ... */}</form>;
}

Например, это позволяет отобразить подтверждение или сообщение об ошибке, возвращаемое действием формы:

import { useState } from 'react';
import { useFormState } from 'react-dom';

const AddToCartForm = ({ id, title, addToCart }) => {
  const addToCartAction = async (prevState, formData) => {
    try {
      await addToCart(formData, title);
      return 'Добавлено в корзину';
    } catch (e) {
      return "Невозможно добавить в корзину: товар распродан.";
    }
  };

  const [message, formAction] = useFormState(addToCartAction, null);

  return (
    <form action={formAction}>
      <h2>{title}</h2>
      <input type="hidden" name="itemID" value={id} />
      <button type="submit">Добавить в корзину</button>&nbsp;
      {message}
    </form>
  );
};

type Item = {
  id: string;
  title: string;
};

export const App = () => {
  const [cart, setCart] = useState<Item[]>([]);

  const addToCart = async (formData: FormData, title) => {
    const id = String(formData.get('itemID'));
    // имитация запроса
    await new Promise(
      (resolve) => setTimeout(resolve, 1000)
    );
    if (id === '1') {
      setCart((cart: Item[]) => [...cart, { id, title }]);
    } else {
      throw new Error('Unavailable');
    }

    return { id };
  };

  return (
    <>
      <AddToCartForm
        id="1"
        title="JavaScript: The Definitive Guide"
        addToCart={addToCart}
      />
      <AddToCartForm
        id="2"
        title="JavaScript: The Good Parts"
        addToCart={addToCart}
      />
    </>
  );
};

Примечание: useFormState должен быть импортирован из react-dom, а не react. Подробнее о useFormState.

`useFormStatus`

useFormStatus позволяет узнать, отправляет ли родительский элемент <form> в настоящее время или успешно выполнил отправку. Он может быть вызван из дочерних элементов формы, и он возвращает объект со следующими свойствами:

const { pending, data, method, action } = useFormStatus();

Свойство data можно использовать для отображения данных, отправляемых пользователем. Вы также можете отобразить состояние ожидания (pending), как в следующем примере, где кнопка отключена во время отправки формы:

import { useState } from 'react';
import { useFormStatus } from 'react-dom';

const AddToCartForm = ({ id, title, addToCart }) => {
  const formAction = async (formData) => {
    try {
      await addToCart(formData, title);
    } catch (e) {
      // ошибка
    }
  };

  return (
    <form action={formAction}>
      <h2>{title}</h2>
      <input type="hidden" name="itemID" value={id} />
      <SubmitButton />
    </form>
  );
};

const SubmitButton = () => {
  const { pending } = useFormStatus();
  return (
    <button disabled={pending} type="submit">
      Добавить в корзину
    </button>
  );
};

type Item = {
  id: string;
  title: string;
};

const Cart = ({ cart }: { cart: Item[] }) => {
  if (cart.length == 0) {
    return null;
  }
  return (
    <>
      Cart content:
      <ul>
        {cart.map((item, index) => (
          <li key={index}>{item.title}</li>
        ))}
      </ul>
      <hr />
    </>
  );
};

export const App = () => {
  const [cart, setCart] = useState<Item[]>([]);

  const addToCart = async (formData: FormData, title) => {
    const id = String(formData.get('itemID'));
    // имитация запроса
    await new Promise(
      (resolve) => setTimeout(resolve, 1000)
    );
    setCart((cart: Item[]) => [...cart, { id, title }]);

    return { id };
  };

  return (
    <>
      <Cart cart={cart} />
      <AddToCartForm
        id="1"
        title="JavaScript: The Definitive Guide"
        addToCart={addToCart}
      />
      <AddToCartForm
        id="2"
        title="JavaScript: The Good Parts"
        addToCart={addToCart}
      />
    </>
  );
};

Примечание: useFormState должен быть импортирован из react-dom, а не react. Кроме того, он работает только тогда, когда родительская форма использует свойство action, описанное выше. Вместе с useFormState этот хук улучшит пользовательский опыт клиентских форм, не загромождая ваши компоненты бесполезными эффектами. Подробнее о useFormStatus.

`useOptimistic`

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

import { useOptimistic } from 'react';

function AppContainer() {
  const [optimisticState, addOptimistic] = useOptimisti(
    state,
    // updateFn
    (currentState, optimisticValue) => {
      // merge and return new state
      // with optimistic value
    }
  );
}

В приведенном выше примере c корзиной мы могли бы использовать этот хук для отображения корзины с новым элементом, добавленным до завершения AJAX вызова:

import { useState, useOptimistic } from 'react';

const AddToCartForm = ({ id, title, addToCart, optimisticAddToCart }) => {
  const formAction = async (formData) => {
    optimisticAddToCart({ id, title });
    try {
      await addToCart(formData, title);
    } catch (e) {
      // ошибка
    }
  };

  return (
    <form action={formAction}>
      <h2>{title}</h2>
      <input type="hidden" name="itemID" value={id} />
      <button type="submit">Добавить в корзину</button>
    </form>
  );
};

type Item = {
  id: string;
  title: string;
};

const Cart = ({ cart }: { cart: Item[] }) => {
  if (cart.length == 0) {
    return null;
  }
  return (
    <>
      Cart content:
      <ul>
        {cart.map((item, index) => (
          <li key={index}>{item.title}</li>
        ))}
      </ul>
      <hr />
    </>
  );
};

export const App = () => {
  const [cart, setCart] = useState<Item[]>([]);

  const [optimisticCart, optimisticAddToCart] = useOptimistic<Item[], Item>(
    cart,
    (state, item) => [...state, item]
  );

  const addToCart = async (formData: FormData, title) => {
    const id = String(formData.get('itemID'));
    // имитация запроса
    await new Promise((resolve) => setTimeout(resolve, 1000));
    setCart((cart: Item[]) => [...cart, { id, title }]);

    return { id };
  };

  return (
    <>
      <Cart cart={optimisticCart} />
      <AddToCartForm
        id="1"
        title="JavaScript: The Definitive Guide"
        addToCart={addToCart}
        optimisticAddToCart={optimisticAddToCart}
      />
      <AddToCartForm
        id="2"
        title="JavaScript: The Good Parts"
        addToCart={addToCart}
        optimisticAddToCart={optimisticAddToCart}
      />
    </>
  );
};

Оптимистичное обновление пользовательского интерфейса — отличный способ улучшить взаимодействие с пользователем веб-приложения. В таком случае эти хуки очень помогают. Подробнее о useOptimistic.

Async Transitions (Асинхронные переходы)

React Transition API позволяет обновлять состояние, не блокируя пользовательский интерфейс. Например, он позволяет отменить предыдущее изменение состояния, если пользователь передумал. Идея состоит в том, чтобы обернуть изменение состояния вызовом startTransition.

function TabContainer() {
  const [isPending, startTransition] = useTransition();
  const [tab, setTab] = useState('about');

  function selectTab(nextTab) {
    // вместо прямого вызова setTab(nextTab),
    // оберните изменение состояния в transition
    startTransition(() => {
      setTab(nextTab);
    });
  }
  // ...
}

В следующем примере показана навигация по вкладкам с помощью Transition API. Нажмите «Сообщения», а затем сразу нажмите «Контакты». Обратите внимание, что это прерывает медленный рендеринг "Posts". Вкладка «Контакты» отображается сразу. Так как это обновление состояния помечено как переход, медленная повторная отрисовка не привела к зависанию пользовательского интерфейса.

import { useState, useTransition } from 'react';
import TabButton from './TabButton';
import AboutTab from './AboutTab';
import PostsTab from './PostsTab';
import ContactTab from './ContactTab';

export function App() {
  const [isPending, startTransition] = useTransition();
  const [tab, setTab] = useState('about');

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }

  return (
    <>
      <TabButton isActive={tab === 'about'} onClick={() => selectTab('about')}>
        О нас
      </TabButton>
      <TabButton isActive={tab === 'posts'} onClick={() => selectTab('posts')}>
        Посты (медленное)
      </TabButton>
      <TabButton
        isActive={tab === 'contact'}
        onClick={() => selectTab('contact')}
      >
        Контакты
      </TabButton>
      <hr />
      {tab === 'about' && <AboutTab />}
      {tab === 'posts' && <PostsTab />}
      {tab === 'contact' && <ContactTab />}
    </>
  );
}

useTransition уже доступен в React 18.2. Что нового в React 19, так это то, что теперь вы можете передать асинхронную функцию startTransition, которую React ожидает для начала перехода. Это полезно для отправки данных с помощью AJAX вызова и визуализации результата в переходе. Состояние ожидания перехода начинается с асинхронной отправки данных. Он уже используется в описанной выше функции действий с формами. Это означает, что React вызывает обработчик <form action> обернутый в startTransition, поэтому он не блокирует текущую страницу.

Заключение

Все эти функции работают в клиентских приложениях React, например, в приложениях, поставляемых в комплекте с Vite. Для их использования вам не нужен SSR-фреймворк, такой как Next или Remix, хотя они также работают с серверными приложениями React. Благодаря этим функциям получение данных и формы становятся значительно проще для реализации в React. Однако создание отличного пользовательского опыта включает в себя интеграцию всех этих хуков, что может быть сложным. Почему эти функции появятся в React 19, а не в React 18.3? Похоже, что релиза 18.3 не будет, потому что эти функции включают в себя некоторые незначительные критические изменения. Когда выйдет React 19? Ожидаемого времени релиза пока нет, но все функции, упомянутые в этом посте, уже работают. Я бы пока не рекомендовал их использовать - использование канареечного релиза в продакшене не является хорошей идеей (даже если Next.js это сделает). Очень приятно видеть, что основная команда React работает над улучшением опыта разработки для всех разработчиков React, а не только для тех, кто работает над приложениями SSR. Кроме того, похоже, что они прислушиваются к отзывам сообщества - получение данных и обработка форм являются очень распространенными болевыми точками. По мотивам New client-side hooks coming to React 19