​Передача функции в компонент

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

https://codepen.io/furrycat/pen/GRWOxZv?editors=0010

Например, эту функцию-коллбэк можно вызывать при клике на кнопку или изменении значения поля ввода.

#началоработы #компоненты #документация

​Привязка контекста обработчиков

Обработчики событий у классовых компонентов удобно выносить в отдельные методы. Но нужно помнить о привязке контекста (this).

https://codepen.io/pen?editors=0010

Если внутри обработчика есть ссылки на компонент (обычно this.props или this.state/this.setState), то важно сохранять контекст, чтобы этот this при вызове ссылался именно на компонент.

Лучше всего это делать прямо в конструкторе.

#началоработы #примерыкода #компоненты #документация

Альтернатива биндингу обработчиков

При установке обработчиков событий в React-компонентах не забываем про сохранение контекста выполнения. Классический метод bind разобран выше. Но есть и альтернативы.

👉 Стрелочные функции

https://codepen.io/furrycat/pen/VwpXROe?editors=0010

Обработчик можно оформить как стрелочную функцию. Так как она будет создана внутри метода render, а следовательно при вызове в качестве this у нее будет сам компонент.

Большой минус этого подхода: функция будет создаваться заново при каждом рендере компонента.

👉 Синтаксис общедоступных полей классов

https://codepen.io/furrycat/pen/abJYMrg?editors=0010

Экспериментальная фича, которую нужно отдельно подключать в ваш проект: https://babeljs.io/docs/en/babel-plugin-proposal-class-properties.

Обработчик, объявленный таким образом, дополнительно привязывать к компоненту не нужно.

#началоработы #примерыкода #обработкасобытий #документация

Передача параметров в обработчик события

Иногда в обработчик требуется передать дополнительные параметры (кроме самого объекта события). Например, это может быть полезно внутри списков для указания конкретного элемента. И при этом нельзя забывать о сохранении контекста выполнения.

https://codepen.io/furrycat/pen/ExWEJWx?editors=0011

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

#началоработы #примерыкода #обработкасобытий #документация

​Асинхронный setState

Вот и первая ошибка новичка 🙂

Во многих примерах из предыдущих постов метод setState использует текущее состояние для вычисления нового. Но это некорректно, так как setState работает асинхронно и может объединять несколько вызовов в один.

https://codepen.io/furrycat/pen/VwpXNJr?editors=0010

Метод update() делает два вызова setState подряд, каждый из которых увеличивает value на 1. Но в результате мы получаем не 3, как предполагалось, а 2. Два вызова просто превратились в один.

#началоработы #ошибки #состояние #документация #примерыкода

Асинхронный setState. Решение

Если вы хотите использовать данные текущего состояния (или пропсов) в вызове setState, то следует воспользоваться его вариацией, которая принимает не объект, а функцию. В эту функцию передаются текущие (на момент выполнения!) state и props, а вернуть нужно объект с измененными полями.

https://codepen.io/furrycat/pen/eYvMaYJ?editors=0010

#началоработы #ошибки #состояние #примерыкода #документация

setState() - что нужно знать

👉 setState - единственный способ изменить состояние компонента. Простое присваивание в this.state работает исключительно в конструкторе.

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

👉 В setState нужно передавать только те поля, которые изменились. Неизменные копировать необязательно. Изменения будут сложены со старым состоянием.

#началоработы #состояние #документация

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

Мы уже говорили о том, что у классовых компонентов больше возможностей, чем у функциональных. Среди них - возможность отслеживать события жизненного цикла.

Какие они вообще бывают?

👉 Монтирование (mounting) - первоначальный рендеринг компонента на странице.
👉 Обновление - происходит при изменении пропсов или состояния компонента.
👉 Размонтирование (unmounting) - удаление корневого DOM-узла компонента.
👉 Всплытие ошибок от дочерних компонентов.

За каждое из этих событий можно зацепиться с помощью методов жизненного цикла. Рассмотрим самые популярные:

☑️ constructor() - конструктор классового компонента. Вызывается еще до монтирования. Здесь нужно инициализировать состояние (this.state) и привязывать обработчики событий к экземпляру компонента.

☑️ render() - главный метод компонента, который должен вернуть его разметку.

☑️ componentDidMount() - вызывается сразу после монтирования компонента в DOM. Тут стоит взаимодействовать с DOM-узлами (если нужно) и отправлять сетевые запросы.

☑️ componentDidUpdate() - вызывается после каждого обновления пропсов или состояния компонента (не вызывается при первом рендере). Тут удобно сравнивать текущие данные с предыдущими и делать что-нибудь на этой основе.

☑️ componentWillUnmount() - вызывается перед размонтированием компонента. Тут нужно очищать память, сбрасывать все таймеры и подписки.

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

Ссылка на документацию (рус): https://ru.reactjs.org/docs/react-component.html#the-component-lifecycle

#началоработы #компоненты #жизненныйциклкомпонента

Пропсы - только для чтения

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

#важно #компоненты #началоработы #документация

Однонаправленный поток данных

Компонент может передавать известные ему данные (собственное состояние или полученные сверху пропсы) только вниз, дочерним компонентам (через их пропсы). Это однонаправленный нисходящий поток данных.

При этом внутреннее состояние компонента изолировано внутри него. То есть оно не видно ни его родителям, ни его детям.

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

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

#началоработы #потокданных #компоненты #документация

Подъем состояния

Статья из документации (рус.): https://ru.reactjs.org/docs/lifting-state-up.html

Речь идет о том, что изменяемое состояние должно находиться в самом старшем компоненте, которому оно требуется, а затем опускаться вниз по цепочке пропсов.

В примере из документации у нас есть приложение для перевода температуры между шкалами Цельсия и Фаренгейта.

👉 главный компонент Calculator, который непосредственно выполняет пересчет
👉 два компонента - поля для ввода температуры
👉 компонент с сообщением о том, достаточно ли указанной температуры для кипения воды

Идея тут в том, что состояние всего приложения хранится в одном месте - в компоненте Calculator, хотя эти данные используют и все дочерние компоненты. Важно соблюдать концепцию "единственного источника правды".

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

#началоработы #состояние #потокданных #документация

Предотвращение рендеринга

Иногда компонент может НИЧЕГО не выводить на страницу, прятаться, несмотря на то, что он был отрендерен другим компонентом. Это часто требуется для сообщений об ошибках.

Чтобы добиться этого, достаточно просто вернуть null из функционального компонента или метода render классового компонента.

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

#началоработы #компоненты #документация

Условный рендеринг

Очень часто нужно вывести один или другой компонент в зависимости от некоторого условия - например, ссылку на авторизацию или приветствие, если юзер уже авторизован.

Мы уже разбирались, что в JSX можно использовать любые валидные JavaScript-выражения. В том числе и самые разные условия. Быстро пробежимся по вариантам.

👉 Вне JSX

https://codepen.io/furrycat/pen/YzZLrzE?editors=0010

Мы всегда можем произвести все нужные операции ДО инструкции return (в теле функционального компонента или метода render классового компонента). Здесь можно использовать любые JS-конструкции, включая if и switch.

Вычислив нужный компонент, просто поместите его в переменную и выведите в JSX в return.

👉 Внутри JSX

Внутри JSX можно использовать только ВЫРАЖЕНИЯ, то есть if не подходит. Вместо него подойдут:

☑️ оператор логического сложения &&. Подходит, если вам нужно вывести или скрыть какой-то компонент в зависимости от условия.

https://codepen.io/furrycat/pen/ExWLway?editors=0010

☑️ тернарный оператор. Дает возможность выбрать между двумя вариантами.

https://codepen.io/furrycat/pen/MWpGEwW?editors=0010

Главное, не стремиться все запихнуть в JSX. Большие и сложные выражения лучше выносить в тело функции для лучшей читаемости.

#началоработы #jsx #примерыкода #документация

Можно ли без JSX?

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

На самом деле, все очень просто. JSX компилируется в обычный JavaScript код - вызов функции React.createElement() с описанием DOM-узла (тег, атрибуты, дочерние элементы).

Вот здесь можно онлайн поиграть с компилятором JSX. Просто вводите разметку, а Babel выдаст получившийся JSX.

#jsx #подкапотом #документация

​Атрибут key в списках

Три правила для правильной установки ключа:

👉 ключ должен быть уникальным В ПРЕДЕЛАХ МАССИВА ЭЛЕМЕНТОВ
👉 не следует использовать в качестве ключа порядковый индекс элемента в массиве
👉 ключ должен находиться именно на том элементе, который возвращается из массива, а не на его потомках

#важно #jsx #ключи #документация

Зачем в списках нужны ключи?

При выводе массива элементов в JSX React просит указать key для каждого элемента. Другими словами, для каждого элемента нужно указать УНИКАЛЬНЫЙ (в пределах массива) идентификатор. React хочет иметь возможность различать эти элементы, зачем это ему?

Для оптимизации. Если вы добавляете в массив новые элементы, не изменяя при этом другие, React хочет просто добавить один элемент в DOM, а не перерисовывать весь список. Но для этого он должен понимать, что можно оставить как есть.

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

Статья (рус): Использование индекса в качестве ключа — это анти-паттерн

#подкапотом #jsx #ключи #ссылки

React Developer Tools

Расширение для Chrome и Firefox, которое позволяет отлаживать React-приложения.

Еще есть пакет react-devtools, чтобы отлаживать там, где нельзя установить расширение (в мобильных браузерах, Safari, внутри фреймов).

Этот инструмент отображает дерево компонентов, пропсы и состояние, так что найти причину ошибки становится намного проще.

#инструменты #отладка #документация

Работа с элементами форм

Элементы форм в HTML находятся на особом положении, потому что у них есть свое собственное состояние. Но внутри React приложения удобно это состояние контролировать, то есть указывать элементу, что отображать и перехватывать все изменения. Таким образом, все состояние приложения останется в одном месте.

https://codepen.io/furrycat/pen/RwpyLMe?editors=0010

Другими словами, мы устанавливаем значение value (для инпута), а также перехватываем события change и обновляем value собственноручно.

С элементами textarea и select работаем по тому же сценарию - value и onChange. Это довольно удобно, так как унифицирует поведение разных контролов.

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

#началоработы #примерыкода #формы #документация

Обработка нескольких полей ввода

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

https://codepen.io/furrycat/pen/yLMjzEO?editors=0010

#началоработы #примерыкода #формы #документация

Композиция против наследования

Документация React с самого начала выражает свою позицию по поводу организации компонентов. Используйте композицию вместо наследования - всегда.

Не будем с ней спорить. Композиция - это более гибкая модель, чем наследование.

В статье разобрана пара примеров использования композиции там, где новички пытаются использовать наследование.

👉 Вставка дочерних элементов.

Используйте props.children, или другие пропсы, содержащие JSX.

👉 Специализация.

Имеются ввиду частные случаи других компонентов - например WelcomeDialog для Dialog. Используйте паттерн, в котором специализированный компонент рендерит базовый компонент с нужными настройками.

#паттерны #документация