1.

Доступность контента
Доступность контента — это специальные технические и архитектурные
решения, которые помогают людям с ограниченными возможностями
использовать сайты.
Семантическая вёрстка — это основа доступности контента в веб-
приложениях. Используя различные HTML-элементы можно улучшить
восприимчивость и понятность ваших сайтов. Это позволяет сделать контент
доступным без особых усилий.

2. Разделение кода
Большинство React-приложений «собирают» свои файлы такими
инструментами, как Webpack, Rollup или Browserify. Сборка (или
«бандлинг») — это процесс выявления импортированных файлов и
объединения их в один «собранный» файл (часто называемый «bundle» или
«бандл»). Этот бандл после подключения на веб-страницу загружает всё
приложение за один раз.
Пример:
Приложение:
// app.js
import { add } from './math.js';

console.log(add(16, 26)); // 42
// math.js
export function add(a, b) {
return a + b;
}

Бандл:
function add(a, b) {
return a + b;
}

console.log(add(16, 26)); // 42

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

Чтобы предотвратить разрастание бандла, стоит начать «разделять» ваш

бандл. Разделение кода — это возможность, поддерживаемая такими
бандлерами как Webpack, Rollup или Browserify (с factor-bundle), которая
может создавать несколько бандлов и загружать их по мере необходимости.
import()
Лучший способ внедрить разделение кода в приложение — использовать
синтаксис динамического импорта: import().
До:
import { add } from './math';

console.log(add(16, 26));
После:
import("./math").then(math => {
console.log(math.add(16, 26));
});

Когда Webpack сталкивается с таким синтаксисом, он автоматически

начинает разделять код вашего приложения.
React.lazy()
Функция React.lazy позволяет рендерить динамический импорт как обычный
компонент.
До:
import OtherComponent from './OtherComponent';
После:
const OtherComponent = React.lazy(() => import('./OtherComponent'));

Она автоматически загрузит бандл, содержащий OtherComponent, когда этот

компонент будет впервые отрендерен.
React.lazy принимает функцию, которая должна вызвать динамический
import(). Результатом возвращённого Promise является модуль, который
экспортирует по умолчанию React-компонент (export default).

3. Предохранители
Предохранители — это компоненты React, которые отлавливают ошибки
JavaScript в любом месте деревьев их дочерних компонентов, сохраняют их в
журнале ошибок и выводят запасной UI вместо рухнувшего дерева
компонентов.
Предохранители отлавливают ошибки при рендеринге, в методах жизненного
цикла и конструкторах деревьев компонентов, расположенных под ними.
Предохранители не поймают ошибки в:
 обработчиках событий (подробнее);
  асинхронном коде (например колбэках из setTimeout или
requestAnimationFrame);
 серверном рендеринге (Server-side rendering);
 самом предохранителе (а не в его дочерних компонентах).
Классовый компонент является предохранителем, если он включает хотя бы
один из следующих методов жизненного цикла: static
getDerivedStateFromError() или componentDidCatch(). Используйте static
getDerivedStateFromError() при рендеринге запасного UI в случае отлова
ошибки. Используйте componentDidCatch() при написании кода для
журналирования информации об отловленной ошибке.
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}

static getDerivedStateFromError(error) { // Обновить состояние с тем, чтобы

следующий рендер показал запасной UI. return { hasError: true }; }
componentDidCatch(error, errorInfo) { // Можно также сохранить информацию
об ошибке в соответствующую службу журнала ошибок logErrorToMyService(error,
errorInfo); }
render() {
if (this.state.hasError) { // Можно отрендерить запасной UI
произвольного вида return <h1>Что-то пошло не так.</h1>; }
return this.props.children;
}
}

И можно дальше им пользоваться, как обыкновенным компонентом:

<ErrorBoundary>
<MyWidget />
</ErrorBoundary>
Предохранители работают как JavaScript-блоки catch {}, но только для
компонентов. Только классовые компоненты могут выступать в роли
предохранителей. На практике чаще всего целесообразным будет один раз
описать предохранитель и дальше использовать его по всему приложению.
Обратите внимание, что предохранители отлавливают ошибки
исключительно в своих дочерних компонентах.

4. Перенаправление рефов
Перенаправление рефов позволяет автоматически передавать реф
компонента одному из его дочерних элементов. Большинству компонентов
перенаправление рефов не нужно, но оно может быть полезно, например,
если вы пишете библиотеку.
Перенаправление рефов позволяет взять ref из атрибутов компонента, и
передать («перенаправить») его одному из дочерних компонентов.
В данном примере
мы используем React.forwardRef в компоненте FancyButton, чтобы получить
реф и передать его в дочерний DOM-элемент button.

const FancyButton = React.forwardRef((props, ref) => ( <button ref={ref}

className="FancyButton"> {props.children}
</button>
));

// Теперь реф будет указывать непосредственно на DOM-узел button:

const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

Таким образом, когда мы будем применять FancyButton в других

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

5. Фрагменты
Фрагменты позволяют формировать список дочерних элементов, не создавая
лишних узлов в DOM.
Мотивация

Возврат списка дочерних элементов из компонента — распространённая

практика. Рассмотрим пример на React:
class Table extends React.Component {
render() {
return (
<table>
<tr>
<Columns />
</tr>
</table>
);
}
}

<Columns /> должен вернуть несколько элементов <td>, чтобы HTML

получился валидным. Если использовать div как родительский элемент
внутри метода render() компонента <Columns />, то HTML окажется
невалидным.

class Columns extends React.Component {

 render() {
return (
<div>
<td>Привет</td>
<td>Мир</td>
</div>
);
}
}

Результатом вывода <Table /> будет:

<table>
<tr>
<div>
<td>Привет</td>
<td>Мир</td>
</div>
</tr>
</table>

Фрагменты решают эту проблему.

Использование
class Columns extends React.Component {
render() {
return (
<React.Fragment> <td>Привет</td>
<td>Мир</td>
</React.Fragment> );
}
}

Результатом будет правильный вывод <Table />:

<table>
<tr>
<td>Привет</td>
<td>Мир</td>
</tr>
</table>

Существует сокращённая запись объявления фрагментов. Она выглядит как

пустые теги:
class Columns extends React.Component {
render() {
return (
<><td>Привет</td>
<td>Мир</td>
</>);
}
}
Можно использовать <></> так же, как используется любой другой элемент.
Однако такая запись не поддерживает ключи или атрибуты.
Фрагменты, объявленные с помощью <React.Fragment>, могут иметь ключи.
Например, их можно использовать при создании списка определений,
преобразовав коллекцию в массив фрагментов.
key — это единственный атрибут, допустимый у Fragment

6. Компоненты высшего порядка

Говоря просто, компонент высшего порядка — это функция, которая
принимает компонент и возвращает новый компонент.
const EnhancedComponent = higherOrderComponent(WrappedComponent);
Если обычный компонент преобразует пропсы в UI, то компонент высшего
порядка преобразует компонент в другой компонент.

7. JSX в деталях
JSX — синтаксический сахар для функции React.createElement(component,
props, ...children). Этот JSX-код:
<MyButton color="blue" shadowSize={2}>
Нажми меня
</MyButton>

Скомпилируется в:
React.createElement(
MyButton,
{color: 'blue', shadowSize: 2},
'Нажми меня'
)

Первая часть JSX тега определяет тип React-элемента.

Типы, написанные с большой буквы, указывают, что JSX-тег ссылается на
React-компонент. Эти теги компилируются в прямую ссылку на
именованную переменную, поэтому, если вы используете JSX-выражение
<Foo />, то Foo должен быть в области видимости.

React должен находиться в области видимости

Поскольку JSX компилируется в вызов React.createElement, библиотека React
должна всегда быть в области видимости вашего JSX-кода.
Использование записи через точку
Вы также можете ссылаться на React-компонент, используя запись через
точку. Это удобно, если у вас есть модуль, который экспортирует много
React-компонентов. К примеру, если MyComponents.DatePicker является
компонентом, то вы можете обратиться к нему напрямую, используя запись
через точку:
import React from 'react';

const MyComponents = {
DatePicker: function DatePicker(props) {
return <div>Представьте, что здесь цвет {props.color} виджета выбора
даты.</div>;
}
}

function BlueDatePicker() {
return <MyComponents.DatePicker color="blue" />;}

Названия типов пользовательских компонентов должны начинаться с

большой буквы
Если название типа элемента начинается с маленькой буквы, он ссылается на
встроенный компонент, к примеру <div> или <span>, что в результате
приведёт к тому, что в React.createElement будет передана строка 'div' или
'span'. Типы, начинающиеся с заглавной буквы, такие как <Foo />,
компилируются в React.createElement(Foo) и соответствуют компоненту,
который был объявлен или импортирован в вашем JavaScript-файле.

Выбор типа во время исполнения

В качестве типа React-элемента нельзя использовать выражение. Если вы
хотите использовать выражение, чтобы указать тип элемента, присвойте его в
переменную, начинающуюся с заглавной буквы. Это подходит для рендера
компонентов в зависимости от ваших пропсов:
import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
photo: PhotoStory,
video: VideoStory
};

function Story(props) {
// Неправильно! JSX-тип не может являться выражением return
<components[props.storyType] story={props.story} />;}
Чтобы исправить это, мы присвоим тип в переменную, начинающуюся
с заглавной буквы:
import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
photo: PhotoStory,
video: VideoStory
};

function Story(props) {
// Правильно! JSX-тип может являться переменной, названной с заглавной буквы
const SpecificStory = components[props.storyType]; return <SpecificStory
story={props.story} />;}

Пропсы в JSX
JavaScript-выражения как пропсы
Вы можете передавать любые JavaScript-выражения как пропсы, обернув их в
{}.
Оператор if и цикл for не являются выражениями в JavaScript, поэтому
их нельзя непосредственно использовать в JSX. Вместо этого, вы можете
окружить ими JSX-код. К примеру:
function NumberDescriber(props) {
let description;
if (props.number % 2 == 0) { description = <strong>чётным</strong>; } else
{ description = <i>нечётным</i>; } return <div>{props.number} является
{description} числом</div>;
}

Вы можете передать строковый литерал как проп. Эти два выражения

эквивалентны:
<MyComponent message="привет, мир" />

<MyComponent message={'привет, мир'} />

Установка пропсов по умолчанию в «true»

Если вы не передаёте значение в проп, то по умолчанию оно будет true. Эти
два JSX выражения эквивалентны:
<MyTextBox autocomplete />

<MyTextBox autocomplete={true} />

Если у вас уже есть пропсы внутри объекта props и вы хотите передать

их в JSX, вы можете использовать оператор расширения .... Эти два
компонента эквивалентны:
function App1() {
return <Greeting firstName="Иван" lastName="Иванов" />;
}

function App2() {
const props = {firstName: 'Иван', lastName: 'Иванов'};
return <Greeting {...props} />;}

Дочерние компоненты в JSX

В JSX-выражениях содержимое, которое расположено между открывающими
и закрывающими тегами, передаётся с помощью специального пропа:
props.children. Существует несколько способов передать дочерние
компоненты
Строковые литералы
Если вы поместите строку между открывающим и закрывающим тегом,
то props.children будет равно этой строке. Это полезно при создании
встроенных HTML-элементов. К примеру:
<MyComponent>Привет, мир!</MyComponent>
Это корректный JSX-код, в котором
значение props.children в MyComponent будет строкой "Привет, мир!"

8. Порталы
Порталы позволяют рендерить дочерние элементы в DOM-узел, который
находится вне DOM-иерархии родительского компонента.
ReactDOM.createPortal(child, container)
Первый аргумент (child) — это любой React-компонент, который может быть
отрендерен, такой как элемент, строка или фрагмент. Следующий аргумент
(container) — это DOM-элемент.

Обычно, когда вы возвращаете элемент из рендер-метода компонента,

он монтируется в DOM как дочерний элемент ближайшего родительского
узла:
render() {
// React монтирует новый div и рендерит в него дочерние элементы
return (
<div>
{this.props.children}
</div> );
}

Но иногда требуется поместить потомка в другое место в DOM:

render() {
// React *не* создаёт новый div. Он рендерит дочерние элементы в `domNode`.
 // `domNode` — это любой валидный DOM-узел, находящийся в любом месте в DOM.
return ReactDOM.createPortal(
this.props.children,
domNode );
}

9. Profiler
Profiler измеряет то, как часто рендерится React-приложение и какова
«стоимость» этого. Его задача — помочь найти медленные части
приложения, которые можно оптимизировать.
Profiler может быть добавлен в любую часть React-дерева для измерения
стоимости рендеринга этой части. Он принимает два пропа: id (string) и
колбэк onRender (function), который React вызывает каждый раз, когда
компонент внутри дерева «фиксирует» обновление.
render(
<App>
<Profiler id="Navigation" onRender={callback}>
<Navigation {...props} />
</Profiler>
<Main {...props} />
</App>
);
Для замера разных частей приложения могут быть использованы несколько
компонентов Profiler.

10. Соглосование
Алгоритм сравнения
При сравнении двух деревьев первым делом React сравнивает два корневых
элемента. Поведение различается в зависимости от типов корневых
элементов.
Элементы различных типов
Всякий раз, когда корневые элементы имеют различные типы, React
уничтожает старое дерево и строит новое с нуля. Переходы от <a> к <img>,
или от <Article> к <Comment>, или от <Button> к <div> приведут к полному
перестроению.
При уничтожении дерева старые DOM-узлы удаляются. Экземпляры
компонента получают componentWillUnmount(). При построении нового
дерева, новые DOM-узлы вставляются в DOM. Экземпляры компонента
получают componentWillMount(), а затем componentDidMount(). Любое
состояние, связанное со старым деревом, теряется.
DOM-элементы одного типа

При сравнении двух React DOM-элементов одного типа, React смотрит

на атрибуты обоих, сохраняет лежащий в основе этих элементов DOM-узел
и обновляет только изменённые атрибуты. Например:
<div className="before" title="stuff" />

<div className="after" title="stuff" />

Сравнивая эти элементы, React знает, что нужно модифицировать
только className у лежащего в основе DOM-узла.
Обновляя style, React также знает, что нужно обновлять только
изменившиеся свойства. Например:
<div style={{color: 'red', fontWeight: 'bold'}} />

<div style={{color: 'green', fontWeight: 'bold'}} />

Компоненты одного типа

Когда компонент обновляется, его экземпляр остаётся прежним, поэтому его
состояние сохраняется между рендерами. React обновляет пропсы базового
экземпляра компонента для соответствия новому элементу и вызывает
componentWillReceiveProps() и componentWillUpdate() на базовом
экземпляре.

11. Рефы и DOM

Рефы дают возможность получить доступ к DOM-узлам или React-
элементам, созданным в рендер-методе.
Когда использовать рефы
Ситуации, в которых использования рефов является оправданным:
 Управление фокусом, выделение текста или воспроизведение медиа.
 Императивный вызов анимаций.
 Интеграция со сторонними DOM-библиотеками.
По умолчанию нельзя использовать атрибут ref с функциональными
компонентами, потому что для них не создаётся экземпляров.

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

Компонент с рендер-пропом берёт функцию, которая возвращает React-

элемент, и вызывает её вместо реализации собственного рендера.
<DataProvider render={data => (
<h1>Привет, {data.target}</h1>
)}/>

рендер-проп — функция, которая сообщает компоненту что необходимо

рендерить.

13. Статическая типизация

Flow
Flow — это библиотека для статической типизации JavaScript, разработанная
в Facebook и часто применяемая в связке с React. Flow расширяет
возможности JavaScript, добавляя аннотации типов для переменных, функций
и React-компонентов. Ознакомиться с основами Flow можно на странице
официальной документации.
Чтобы начать пользоваться возможностями Flow необходимо:
 добавить Flow в ваш проект как зависимость.
 убедиться, что аннотации Flow удаляются из кода при его компиляции.
 добавить несколько аннотаций типов и запустить Flow для их
проверки;
TypeScript
TypeScript — это язык программирования, разработанный в Microsoft.
TypeScript является надмножеством JavaScript, имеет статическую систему
типов и собственный компилятор. Статическая типизация позволяет
отлавливать ошибки и баги во время компиляции, ещё до запуска
приложения. Подробнее узнать о совместном использовании TypeScript и
React можно здесь.
Чтобы использовать TypeScript, нужно:
 добавить TypeScript в проект как зависимость.
 настроить компилятор.
 использовать правильные расширения файлов.
 установить файлы объявлений для используемых библиотек;
 14. Строгий режим
StrictMode — инструмент для обнаружения потенциальных проблем в
приложении. Также как и Fragment, StrictMode не рендерит видимого UI.
Строгий режим активирует дополнительные проверки и предупреждения для
своих потомков.

Строгий режим может быть включён для любой части приложения.

Например:
import React from 'react';

function ExampleApplication() {
return (
<div>
<Header />
<React.StrictMode> <div>
<ComponentOne />
<ComponentTwo />
</div>
</React.StrictMode> <Footer />
</div>
);
}

15. Проверка типов с помощью PropTypes

По мере роста вашего приложения вы можете отловить много ошибок
с помощью проверки типов. Для этого можно использовать расширения
JavaScript вроде Flow и TypeScript. Но, даже если вы ими не пользуетесь,
React предоставляет встроенные возможности для проверки типов. Для
запуска этой проверки на пропсах компонента вам нужно использовать
специальное свойство propTypes:
import PropTypes from 'prop-types';

class Greeting extends React.Component {

render() {
return (
<h1>Привет, {this.props.name}</h1>
);
}
}

Greeting.propTypes = {
name: PropTypes.string
};
PropTypes предоставляет ряд валидаторов, которые могут использоваться для
проверки, что получаемые данные корректны. В примере
мы использовали PropTypes.string. Когда какой-то проп имеет некорректное
значение, в консоли будет выведено предупреждение. По соображениям
производительности propTypes проверяются только в режиме разработки.

16. Неуправляемые компоненты

В большинстве случаев при работе с формами мы рекомендуем

использовать управляемые компоненты. В управляемом компоненте, данные
формы обрабатываются React-компонентом. В качестве альтернативы можно
использовать неуправляемые компоненты. Они хранят данные формы прямо
в DOM.
Вместо того, чтобы писать обработчик события для каждого обновления
состояния, вы можете использовать неуправляемый компонент и читать
значения из DOM через реф.
Вот так, к примеру, обработчик неуправляемого компонента может получить
имя от элемента input:
class NameForm extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.input = React.createRef(); }

handleSubmit(event) {
alert('Отправленное имя: ' + this.input.current.value);
event.preventDefault();
}

render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Имя:
<input type="text" ref={this.input} /> </label>
<input type="submit" value="Отправить" />
</form>
);
}
}

Неуправляемые компоненты опираются на DOM в качестве источника

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

1. React API верхнего уровня

Компоненты

React-компоненты позволяют разделить пользовательский интерфейс на

независимые, повторно используемые части и думать о них по отдельности.
React-компоненты могут быть объявлены путём создания подклассов
React.Component или React.PureComponent.

 React.Component
 React.PureComponent

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

Мы рекомендуем использовать JSX, чтобы описать то, как должен выглядеть

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

 createElement();
 createFactory();

React.Component
React.Component — это базовый класс для компонентов React, объявленных
как ES6-классы:
class Greeting extends React.Component {
render() {
return <h1>Привет, {this.props.name}</h1>;
}
}

React.PureComponent похож на React.Component. Отличие заключается в том,

что React.Component не реализует shouldComponentUpdate(), а
React.PureComponent реализует его поверхностным сравнением пропсов и
состояния.

React.memo
const MyComponent = React.memo(function MyComponent(props) {
/* рендер с использованием пропсов */
});
React.memo — это компонент высшего порядка. Он похож
на React.PureComponent, но предназначен для функциональных компонентов.
Если ваш функциональный компонент всегда рендерит одинаковый
результат для одних и тех же пропсов, вы можете обернуть его
в вызов React.memo для повышения производительности в некоторых
случаях, мемоизируя результат. Это значит, что React будет использовать
результат последнего рендера, избегая повторного рендеринга.

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

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

isValidElement()
React.isValidElement(object)
Проверяет, что объект является элементом React. Возвращает true или false.

React.Children

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

структурой данных this.props.children.
React.Children.map
React.Children.map(children, function[(thisArg)])
Вызывает функцию для каждого непосредственного потомка,
содержащегося в children передавая их по очереди в 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)
Возвращает общее количество компонентов в children, равное числу раз
которое будет вызван обратный вызов, переданный в map или forEach.
React.Children.only
React.Children.only(children)
Проверяет, что у children есть только один потомок (React элемент),
и возвращает его. Иначе этот метод выдаёт ошибку.

React.Fragment
Компонент React.Fragment позволяет возвращать несколько элементов
в методе render() без создания дополнительного элемента DOM:
render() {
return (
<React.Fragment>
Какой-то текст.
<h2>Заголовок</h2>
</React.Fragment>
);
}

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

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

2. React.Component
React позволяет определять компоненты как классы или функции.
В настоящее время классовые компоненты имеют больше возможностей.
Они разобраны на этой странице. Чтобы определить такой компонент,
необходимо отнаследоваться от React.Component:
class Welcome extends React.Component {
render() {
return <h1>Привет, {this.props.name}</h1>;
 }
}

Единственный обязательный метод в подклассе React.Component — render().
Все остальные методы, описанные ниже, являются необязательными.

Жизненный цикл компонента

Монтирование

При создании экземпляра компонента и его вставке в DOM, следующие

методы вызываются в установленном порядке:
 constructor()
 static getDerivedStateFromProps()
 render()
 componentDidMount()

Обновление

Обновление происходит при изменении пропсов или состояния. Следующие

методы вызываются в установленном порядке при повторном рендере
компонента:
 static getDerivedStateFromProps()
 shouldComponentUpdate()
 render()
 getSnapshotBeforeUpdate()
 componentDidUpdate()

Размонтирование

Этот метод вызывается при удалении компонента из DOM:

 componentWillUnmount()

render() —единственный обязательный метод в классовом компоненте.

При вызове он проверяет this.props и this.state и возвращает один
из следующих вариантов:
 Элемент React. Обычно создаётся с помощью JSX. Указывает React,
что рендерить: DOM-узел или пользовательский компонент.
Например, <div /> или <MyComponent />.
 Массивы и фрагменты. Возвращает несколько элементов
из render(). Подробнее про фрагменты.
 Порталы. Рендерит несколько дочерних элементов в другое
поддерево DOM. Подробнее про порталы.
 Строки и числа. Рендерит текстовые DOM-узлы.
 Booleans или null. Ничего не рендерит. (Обычно необходим для
поддержки паттерна return test && <Child />, где test — логическое
значение.)
Функция render() должна быть чистой. Это означает, что она не изменяет
состояние компонента, всегда возвращает один и тот же результат,
не взаимодействует напрямую с браузером.
Взаимодействовать с браузером необходимо в componentDidMount() или других
методах жизненного цикла. Чистый render() делает компонент понятным.

constructor()
constructor(props)
Вы можете не использовать конструктор в React-компоненте, если
вы не определяете состояние или не привязываете методы.
Конструктор компонента React вызывается до того, как компонент будет
примонтирован. В начале конструктора необходимо вызывать super(props).
Если это не сделать, this.props не будет определён. Это может привести
к багам.

Конструкторы в React обычно используют для двух целей:

 Инициализация внутреннего состояния через присвоение
объекта this.state.
 Привязка обработчиков событий к экземпляру.
Вы не должны вызывать setState() в constructor(). Если вам нужно
внутреннее состояние, присвойте начальное состояние this.state прямо
в конструкторе.
constructor(props) {
super(props);
// Не вызывайте здесь this.setState()!
this.state = { counter: 0 };
this.handleClick = this.handleClick.bind(this);
}

getDerivedStateFromProps(props, state);
вызывается непосредственно перед вызовом метода render, как при
начальном монтировании, так и при последующих обновлениях. Он должен
вернуть объект для обновления состояния или null, чтобы ничего
не обновлять.
Этот метод существует для редких случаев, когда состояние зависит
от изменений в пропсах.

componentDidMount()
 вызывается сразу после монтирования (то есть, вставки компонента в DOM).
В этом методе должны происходить действия, которые требуют наличия
DOM-узлов. Это хорошее место для создания сетевых запросов.
 Используйте shouldComponentUpdate(nextProps, NextState),
чтобы указать необходимость следующего рендера на основе изменений
состояния и пропсов. По умолчанию происходит повторный рендер при
любом изменении состояния. В большинстве случаев вы должны полагаться
на это поведение.
shouldComponentUpdate() вызывается перед рендером, когда получает новые
пропсы или состояние. Значение по умолчанию равно true. Этот метод
не вызывается при первом рендере или когда используется forceUpdate().
Этот метод нужен только для повышения производительности

getSnapshotBeforeUpdate(prevProps, prevState) вызывается
прямо перед этапом «фиксирования» (например, перед добавлением
в DOM). Он позволяет вашему компоненту брать некоторую информацию
из DOM (например, положение прокрутки) перед её возможным
изменением. Любое значение, возвращаемое этим методом жизненного
цикла, будет передано как параметр componentDidUpdate()

componentWillUnmount() вызывается непосредственно перед

размонтированием и удалением компонента. В этом методе выполняется
необходимый сброс: отмена таймеров, сетевых запросов и подписок,
созданных в componentDidMount().

static getDerivedStateFromError()
static getDerivedStateFromError(error)

Этот метод жизненного цикла вызывается после возникновения ошибки

у компонента-потомка. Он получает ошибку в качестве параметра
и возвращает значение для обновления состояния.

componentDidCatch()
componentDidCatch(error, info)

Этот метод жизненного цикла вызывается после возникновения ошибки

у компонента-потомка. Он получает два параметра:
1. error — перехваченная ошибка
2. info — объект с ключом componentStack, содержащий информацию
о компоненте, в котором произошла ошибка.
setState()
setState(updater, [callback])
setState() добавляетв очередь изменения в состоянии компонента. Также
он указывает React, что компонент и его дочерние элементы должны быть
повторно отрендерены с обновлённым состоянием. Этот метод используется
для обновления интерфейса в ответ на обработчики событий и ответы
сервера.

Первым аргументом передаётся функция updater, которая имеет следующий

вид:
(state, props) => stateChange

state —ссылка на состояние компонента при изменении. Объект состояния

не должен мутировать. Изменения должны проявляться в виде нового
объекта на основе входных данных из state и props. Предположим, что
мы хотели бы увеличить значение состояния с помощью props.step:
this.setState((state, props) => {
return {counter: state.counter + props.step};
});

ReactDOM

render()
ReactDOM.render(element, container[, callback])
Рендерит React-элемент в DOM-элемент, переданный
в аргумент container и возвращает ссылку на компонент (или
возвращает null для компонентов без состояния).
Если React-элемент уже был ранее отрендерен в container, то повторный
вызов произведёт его обновление и изменит соответствующую часть DOM,
чтобы она содержала последние изменения.
hydrate()
ReactDOM.hydrate(element, container[, callback])
То же, что и render(), но используется для гидратации контейнера, HTML-
содержимое которого было отрендерено с помощью ReactDOMServer. React
попытается присоединить обработчики событий к уже существующей
разметке.

React ожидает, что отрендеренное содержимое идентично на сервере,

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

unmountComponentAtNode()
ReactDOM.unmountComponentAtNode(container)
Удаляет смонтированный компонент React из DOM и очищает его
обработчики событий и состояние. Если в контейнер не было смонтировано
ни одного компонента, вызов этой функции ничего не делает.
Возвращает true, если компонент был размонтирован, и false если нет
компонента для размонтирования.

ReactDOM.findDOMNode(component)
Если этот компонент был смонтирован в DOM, он возвращает
соответствующий DOM элемент браузера. Этот метод полезен для чтения
напрямую из DOM (например, чтение значений полей формы) или
произведения измерений DOM. В большинстве случаев, вы можете
присоединить реф к узлу DOM и полностью избежать
использования findDOMNode.

createPortal()
ReactDOM.createPortal(child, container)
Создаёт портал. Порталы предоставляют способ отрендерить дочерние
элементы в узле DOM, который существует вне иерархии DOM-компонента.
ReactDOMServer
Объект ReactDOMServer позволяет отрендерить
компоненты в статическую разметку.
renderToString()
ReactDOMServer.renderToString(element)

Рендерит React-элемент в исходный HTML и возвращает его в виде строки.

Вы можете использовать этот метод, чтобы сгенерировать HTML на сервере
и отправить разметку в ответ на запрос, ускоряя загрузку страницы
и позволяя поисковым движкам обработать ваши страницы для SEO.
renderToStaticMarkup()
ReactDOMServer.renderToStaticMarkup(element)
Похож на метод renderToString, но не создаёт дополнительных DOM-
атрибутов, таких как data-reactroot, используемых внутри React. Этот метод
полезен, когда вы хотите использовать React для генерации простой
статической страницы, где отсутствие дополнительных атрибутов может
сохранить несколько байтов.
Не пользуйтесь этим методом, если вы планируете использовать React
на клиенте для создания интерактивной разметки. Вместо него
используйте renderToString на сервере и ReactDOM.hydrate() на клиенте.
renderToNodeStream()
ReactDOMServer.renderToNodeStream(element)
Рендерит React-элемент в исходный HTML. Возвращает поток для чтения,
который выводит HTML-строку. HTML из потока идентичен тому, что
возвращает ReactDOMServer.renderToString. Вы можете использовать этот метод,
чтобы сгенерировать HTML на сервере и отправить разметку в ответ
на запрос, ускоряя загрузку страницы и позволяя поисковым движкам
обработать ваши страницы для SEO.

renderToStaticNodeStream()
ReactDOMServer.renderToStaticNodeStream(element)
Похож на метод renderToNodeStream, но не создаёт дополнительных DOM-
атрибутов, таких как data-reactroot, используемых внутри React. Метод
полезен, когда вы хотите использовать React для генерации простой
статической страницы, где отсутствие дополнительных атрибутов может
сохранить несколько байтов.
 Элементы DOM
В React все свойства и атрибуты DOM (включая обработчики событий)
должны быть в стиле camelCase. Например, HTML-
атрибут tabindex соответствует атрибуту tabIndex в React. Исключение
составляют атрибуты aria-* и data-*, которые следует писать в нижнем
регистре. В частности, вы можете оставить aria-label как aria-label.

checked
Атрибут checked поддерживается компонентами <input> типа checkbox или radio.
Он нужен для того, чтобы узнать выбран ли компонент. Это полезно для
создания управляемых компонентов. defaultChecked — это неуправляемый
эквивалент, который определяет, выбран ли компонент на момент первого
монтирования.
className
Чтобы указать класс CSS, используйте атрибут className. Это относится
ко всем обычным элементам DOM и SVG, таким как <div>, <a> и т. д.
Если вы используете React с веб-компонентами (что встречается редко),
используйте вместо этого атрибут class.

dangerouslySetInnerHTML
Свойству innerHTML в DOM браузера
соответствует dangerouslySetInnerHTML в React.

htmlFor
Поскольку for является зарезервированным словом JavaScript, для
определения HTML-атрибута for в элементах React вместо него
используйте htmlFor.
SyntheticEvent