React.Children §

React.Children предоставляет функции для работы с непрозрачной структурой данных this.props.children.

React.Children.map §

React.Children.map(children, function[(thisArg)])

Вызывает функцию для каждого непосредственного потомка, содержащегося в children передавая их по очереди в thisArg. Если children — это массив, он будет пройден, и функция будет вызвана для каждого потомка в массиве. Если children равен null или undefined, этот метод вернёт null или undefined, а не массив.

Примечание Если children — это Fragment, он будет рассматриваться как целый потомок, а элементы внутри не будут пройдены.

React.Children.forEach §

React.Children.forEach(children, function[(thisArg)])

Похож на React.Children.map(), но не возвращает массив.

React.Children.count §

React.Children.count(children)

Возвращает общее количество компонентов в children, равное числу раз которое будет вызван обратный вызов, переданный в map или forEach.

React.Children.only §

React.Children.only(children)

Проверяет, что у children есть только один потомок (React-элемент), и возвращает его. Иначе этот метод выдаёт ошибку.

Примечание:

React.Children.only() не принимает возвращаемое значение React.Children.map(), потому что это массив, а не React-элемент.

React.Children.toArray §

React.Children.toArray(children)

Возвращает непрозрачную структуру данных children в виде плоского массива с ключами, заданные каждому дочернему элементу. Полезно, если вы хотите манипулировать коллекциями потомков в ваших методах рендера, особенно если вы хотите отсортировать или извлечь часть this.props.children перед её передачей куда-либо.

Примечание:

React.Children.toArray() изменяет ключи, чтобы сохранить семантику вложенных массивов, когда делает плоским список дочерних элементов. То есть toArray ставит префикс перед каждым ключом в возвращаемом массиве, так что ключ каждого элемента находится в области входного массива, содержащего его.

React.Fragment §

Компонент React.Fragment позволяет возвращать несколько элементов в методе render() без создания дополнительного элемента DOM:

render() {
  return (
    <React.Fragment>
      Какой-то текст.
      <h2>Заголовок</h2>
    </React.Fragment>
  );
}

Вы также можете использовать его сокращённый синтаксис <></>. Чтобы узнать подробнее см. React v16.2.0: Улучшенная поддержка фрагментов.

React.createRef §

React.createRef создаёт реф, который можно прикрепить к React-элементам через атрибут ref.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
 
    this.inputRef = React.createRef();  }
 
  render() {
    return <input type="text" ref={this.inputRef} />;  }
 
  componentDidMount() {
    this.inputRef.current.focus();  }
}

React.forwardRef §

React.forwardRef создаёт React-компонент, который перенаправляет атрибут ref, что он получает, другому компоненту ниже в дереве. Этот метод не очень распространён, но особенно полезен в двух сценариях:

• Перенаправление рефов в DOM-компоненты
• Перенаправление рефов в компонентах высшего порядка

React.forwardRef принимает функцию рендера в качестве аргумента. React будет вызывать эту функцию с пропсами и рефом в качестве двух аргументов. Эта функция должна возвращать узел React.

const FancyButton = React.forwardRef((props, ref) => (  <button ref={ref} className="FancyButton">    {props.children}
  </button>
));
 
// Теперь вы можете получить ссылку на элемент DOM:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

В приведённом выше примере React обнаруживает ref, переданный элементу <FancyButton ref={ref}>, и передаёт его через второй аргумент в функцию рендера внутри вызова React.forwardRef. В свою очередь, функция рендера передаёт ref в элемент <button ref={ref}>.

В результате, после того как React добавит реф, ref.current будет указывать непосредственно на экземпляр <button> элемента DOM.

Читайте Перенаправление рефов, чтобы получить подробную информацию.

React.lazy §

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

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

// Этот компонент загружается динамически
const SomeComponent = React.lazy(() => import('./SomeComponent'));

Обратите внимание, для рендера lazy компонентов требуется чтобы выше в дереве находился компонент <React.Suspense>. Это позволит вам отображать индикатор загрузки.

React.Suspense §

React.Suspense позволяет показать индикатор загрузки в случае, если некоторые компоненты в дереве под ним ещё не готовы к рендеру. В будущем мы планируем позволить Suspense обрабатывать больше сценариев, таких как получение данных от API. Вы можете прочитать об этом в нашей дорожной карте.

Сегодня ленивая загрузка компонентов — это единственный вариант использования, поддерживаемый <React.Suspense>:

// Этот компонент загружается динамически
const OtherComponent = React.lazy(() => import('./OtherComponent'));
 
function MyComponent() {
  return (
    // Отобразится <Spinner> до тех пор, пока не загрузится <OtherComponent />
    <React.Suspense fallback={<Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}

Это задокументировано в нашем руководстве по разделению кода. Обратите внимание, что lazy компоненты могут быть глубоко внутри дерева Suspense — не нужно оборачивать каждый из них. Считается хорошей практикой использовать <Suspense> для индикации загрузки, а lazy() — для разделения кода.

Примечание

Если контент уже доступен пользователю, переключение обратно на индикатор загрузки может его дезориентировать. Иногда лучше показать «старый» интерфейс, пока происходит подготовка нового UI. Для этого можно использовать новое API startTransition и useTransition для работы с переходами, чтобы пометить обновления как переходы и избежать незапланированных откатов.

React.Suspense in Server Side Rendering §

During server side rendering Suspense Boundaries allow you to flush your application in smaller chunks by suspending. When a component suspends we schedule a low priority task to render the closest Suspense boundary’s fallback. If the component unsuspends before we flush the fallback then we send down the actual content and throw away the fallback.

React.Suspense during hydration §

Suspense boundaries depend on their parent boundaries being hydrated before they can hydrate, but they can hydrate independently from sibling boundaries. Events on a boundary before its hydrated will cause the boundary to hydrate at a higher priority than neighboring boundaries. Read more

React.startTransition §

React.startTransition(callback)

React.startTransition lets you mark updates inside the provided callback as transitions. This method is designed to be used when React.useTransition is not available.

Примечание:

Updates in a transition yield to more urgent updates such as clicks.

Updates in a transition will not show a fallback for re-suspended content, allowing the user to continue interacting while rendering the update.

React.startTransition does not provide an isPending flag. To track the pending status of a transition see React.useTransition.