React является точкой входа в библиотеку React. Если вы загружаете React из <script> тега, эти API верхнего уровня доступны на React глобальном уровне. Если вы используете ES6 с npm, вы можете написать import React from 'react'. Если вы используете ES5 с npm, вы можете написать var React = require('react').

Компоненты

Реагирующие компоненты позволяют разделить пользовательский интерфейс на независимые, многоразовые фрагменты и подумать о каждой части отдельно. Компоненты реакции могут быть определены путем подклассификации React.Componentили React.PureComponent.

  • React.Component
  • React.PureComponent

Если вы не используете классы ES6, вы можете использовать create-react-class модуль. 

Создание элементов React

Рекомендуется использовать JSX для описания того, как должен выглядеть ваш пользовательский интерфейс. Каждый элемент JSX является просто синтаксическим сахаром для вызова React.createElement(). Обычно вы не используете следующие методы, если используете JSX.

  • createElement()
  • createFactory()

Преобразование элементов

React предоставляет несколько API для управления элементами:

  • cloneElement()
  • isValidElement()
  • React.Children

Фрагменты

React также предоставляет компонент для рендеринга нескольких элементов без оболочки.

  • React.Fragment

Refs

  • React.createRef
  • React.forwardRef

Справка

React.Component

React.Component является базовым классом для компонентов React, когда они определены с использованием классов ES6 :

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

React.PureComponent

React.PureComponentаналогичен React.Component. Разница между ними заключается в том, что React.Componentона не реализуется shouldComponentUpdate(), но React.PureComponentреализует ее с помощью неглубокой настройки и сравнения состояний.

Если render()функция компонента React отображает один и тот же результат при одинаковых реквизитах и ​​состоянии, вы можете использовать React.PureComponentдля повышения производительности в некоторых случаях.

Заметка

React.PureComponent«ы shouldComponentUpdate()только неглубоко сравнивает объекты. Если они содержат сложные структуры данных, это может привести к ложным отрицаниям для более глубоких различий. Расширяйтесь только PureComponentтогда, когда вы ожидаете наличия простых реквизитов и состояний, или используйте, forceUpdate()когда вы знаете, что глубокие структуры данных изменились. Или рассмотрите возможность использования неизменяемых объектов для быстрого сравнения вложенных данных.

Кроме того, React.PureComponent«ы shouldComponentUpdate()пропускает гребного винта обновления для всего компонента поддерева. Убедитесь, что все компоненты для детей также «чисты».

createElement()

React.createElement(
  type,
  [props],
  [...children]
)

Создайте и верните новый элемент React данного типа. Аргумент типа может быть либо строкой имени тега (например, так 'div'и 'span'), типа компонента React (класс или функция) или типа фрагмента React .

Код, написанный с помощью JSX, будет конвертирован в использование React.createElement(). Обычно вы не вызываете, React.createElement() если используете JSX.

cloneElement()

React.cloneElement(
  element,
  [props],
  [...children]
)

Клонировать и вернуть новый элемент React, используя element в качестве отправной точки. Получившийся элемент будет иметь реквизит оригинального элемента с новым реквизитом, сложенным неглубоко. Новые дети заменят существующих детей. key и ref из исходного элемента будут сохранены.

React.cloneElement() почти эквивалентен:

<element.type {...element.props} {...props}>{children}</element.type>

Однако он также сохраняет refs. Это означает, что если вы получите ребенка с ref ним, вы не случайно его украдете у своего предка. Вы получите то же самое, ref что и ваш новый элемент.

Этот API был введен как замена устаревшего React.addons.cloneWithProps().

createFactory()

React.createFactory(type)

Возвращает функцию, которая создает элементы React данного типа. Например React.createElement(), аргумент типа может быть либо строкой имени тега (например, так 'div'и 'span'), типа компонента React (класс или функция) или типа фрагмента React .

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

Обычно вы не вызываете, React.createFactory() если используете JSX.

isValidElement()

React.isValidElement(object)

Проверяет объект как элемент React. Возвращает true или false.

React.Children

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

React.Children.map

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

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

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>
      Some text.
      <h2>A heading</h2>
    </React.Fragment>
  );
}

Вы также можете использовать его с сокращенным <></> синтаксисом.

React.createRef

React.createRef создает ссылку ref, которая может быть присоединена к элементам 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 принимает функцию рендеринга, которая получает props и ref параметры, и возвращает узел React. Пересылка пересылки - это метод передачи ref через компонент одному из его потомков. Этот метод может быть особенно полезен для компонентов более высокого порядка:

function enhance(Component) {
  class Enhanced extends React.Component {
    // ...

    render() {
      const {forwardedRef, ...rest} = this.props;

      // Assign the custom prop "forwardedRef" as a ref
      return <Component ref={forwardedRef} {...rest} />;
    }
  }

  // Intercept the "ref" and pass it as a custom prop, e.g. "forwardedRef"
  function enhanceForwardRef(props, ref) {
    return <Enhanced {...props} forwardedRef={ref} />;
  }

  // These next lines are not necessary,
  // But they do give the component a better display name in DevTools,
  // e.g. "ForwardRef(withTheme(MyComponent))"
  const name = Component.displayName || Component.name;
  enhanceForwardRef.displayName = `enhance(${name})`;

  return React.forwardRef(enhanceForwardRef);
}