Реагировать на API верхнего уровня

Реагировать на API верхнего уровня

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

Обзор:

Компоненты

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

Если вы не используете классы ES6, вы можете вместо этого использовать модуль create-Reaction-class. Реактивные компоненты также могут быть определены как функции, которые могут быть упакованы

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

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

Трансформирующие элементы

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

Фрагменты

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

неизвестность

Suspense позволяет компонентам «подождать» что-то перед рендерингом. Сегодня Suspense поддерживает только один вариант использования: динамическая загрузка компонентов с помощью React.lazy. В будущем он будет поддерживать другие варианты использования, такие как выборка данных.

Крючки

Крючки - это новое дополнение в React 16.8. Они позволяют вам использовать состояние и другие функции React без написания класса

Ссылка:

React.Component

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

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

React.PureComponent

ФИЛЬМЫ ПОХОЖИЕ НА React.Component Разница между ними заключается в том, что React.Component не реализует shouldComponentUpdate (), а React.PureComponent реализует его с помощью мелкой поддержки и сравнения состояний.

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

Заметка

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

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

React.memo

const MyComponent = React.memo(function MyComponent(props) {
  /* render using props */
});

React.memo является компонентом более высокого порядка. Это похоже на React.PureComponent, но для компонентов функций вместо классов.

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

По умолчанию он только поверхностно сравнивает сложные объекты в объекте props. Если вы хотите контролировать сравнение, вы также можете предоставить пользовательскую функцию сравнения в качестве второго аргумента.

function MyComponent(props) {
  /* render using props */
}
function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
}
export default React.memo(MyComponent, areEqual);

Этот метод существует только для оптимизации производительности. Не полагайтесь на это, чтобы предотвратить? рендер, так как это может привести к ошибкам.

Заметка

В отличие от метода shouldComponentUpdate () для компонентов класса, функция areEqual возвращает значение true, если значения равны, и значение false, если значения не равны. Это обратное значение fromComponentUpdate.

createElement ()

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

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

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

cloneElement ()

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

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

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

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

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

Этот 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. Возвращает истину или ложь.

React.Children

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

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

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

Заметка

Если дети - это фрагмент, он будет рассматриваться как отдельный ребенок и не будет пройден.

React.Children.forEach

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

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

React.Children.count

React.Children.count(children)

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

React.Children.only

React.Children.only(children)

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

Замечания:

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

React.Children.toArray

React.Children.toArray(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 создает ссылку, которую можно прикрепить к элементам 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 другому компоненту ниже в дереве. Этот метод не очень распространен, но особенно полезен в двух сценариях:

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

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));
// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me! </FancyButton>;

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

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