Принципы React - повторение:

- Поток данных в Реакте идёт по нисходящей, от родителей к детям. Например, если компонент рендерит 9 более мелких компонентов, данные - пропсы - передаются от этого крупного компонента в мелкий, который и обрабатывает их. Так работает декларативность React.

- В обработчиках компонентов допустимы (и желательны) стрелочные функции.

- State - это "память" компонентов. Например, с помощью state компонент запоминает, что по нему кликнули.

- Без Redux state хранится прямо в компонентах, в кострукторе их классов. У функциональных компонентов state нет: они так и называются - stateless components.

- Как и в PHP, при объявлении конструктора класса-наследника нужно вызвать конструктор родителя. В JS это нужно делать до вызова собственного конструктора наследника.


#react

Принципы Реакт - продолжение:

- Контролируемые компоненты: это компоненты, полностью зависимые от родительских. У них нет своего state и, как правило, своих методов, кроме render. Их состояние хранится в родительских компонентах, а методы передаются через props.

- В парадигме MVC Реакту отводится место View. Реакт - просто библиотека рендеринга. Разного рода рассчеты, валидация, обработка информации, кроме относящейся к интерфейсу, - все это принадлежит к бизнес-логике и не должно быть определено в компонентах.

- Атрибуты ref могут привести к выстроению императивной системы. Для React это антипаттерн. Об этом позже.

- Функциональные компоненты - способ проектирования Реакт-компонентов, у которых есть только метод render, а остальная информация передается через props. Это более быстрый и чистый способ написания контролируемых компонентов.

#react #функциональные_компоненты

JS - копирование объекта:

- Для копирования объектов есть функция assign. Как она работает:
- функция принадлежит объекту Oblect, поэтому вызывается через Object.assign().
- Она принимает параметры: target - единственный, source - множество, где:
1. target - объект, который возвратит функция.
2. source - объект, из которого копируются ключи-значения.

Пример с клонированием объекта:

let obj = { key: value }
let clone = Object.assign({}, obj)

Здесь функция копирует в пустой объект содержимое obj и присваивает пустой объект переменной clone. Source может быть и объект, определенный прямо в функции.

ВАЖНО: порядок указания sources задает приоритет перезаписи свойств при клонировании. Например в коде:

Object.assign({}, src1, src2)

src1 будет иметь больший приоритет, и если в src2 встретится свойство, аналогичное содержащемуся в src1, оно будет перезаписано свойством из src1.

Эта тема важна для понимания иммутабельности в React.

#JS #React

Выгоды иммутабельности в Реакт:

- Проще отслеживать изменения. Если, например, для хранения state используется один мутабельный объект, для отслеживания изменений его нужно перебирать заново. Если же используется иммутабельность, то отслеживается только название объекта: если оно отличается - состояние изменено.

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

- Легко выполнять ре-рендеринг компонентов.

- Способствует созданию "чистых" компонентов.

#React #Иммутабельность

Реакт - заметка об элементах:

Элементы React - это, по сути, объекты. Благодаря этому мы можем передавать их, как аргументы, в функции и управлять ими привычным для объектов способами. Важный вывод:

- props, key и другие важные сущности React - это просто ключи объектов, которыми под капотом являются элементы.



#React

React - заметки:

- Компоненты Реакт - это функции или классы, которые возвращают Реакт-элементы. Ничего больше.

- Компоненты Реакт "вызываются" в JSX, как обычные HTML-теги - не важно, функциональные это компоненты, классы или какие-либо другие.

- Кастомные компоненты обязательно нужно называть с большой буквы: это не просто конвенция, но правило внутренней архитектуры Реакт.

- Реакт-элементы можно добавлять в компоненты через фигурные скобки.

- Переменные нельзя присвоить компонентам Реакт строкой, как атрибуты HTML. Они (переменные) передаются в атрибуты через фигурные скобки:
attr={styleObject}

- CSS можно передавать компонентам с помощью объектов-сборников правил.

- Любой код, использующий JSX, требует импорта React. Это обязательно.

- Любое свойство, которому не назначено значение, в JSX эквивалентно true.

- Без передачи props объект props все равно будет передан компоненту, но будет пустым.

- Простая схема передачи props:
1. Создаем компонент, отвечающий за однотипный вывод разных данных.
2. Из компонента, включающего в себя версии этого, более мелкого, возвращаем разные его версии.
3. Присваиваем версиям атрибут с разными строками.
4. В самом этом компоненте указываем, что отрисовывать он должен содержимое props своих версий:

function MyElement({ myAttr }) {
return <span>{myAttr}</span>
}

Обратите внимание, здесь не используется прямой путь до props (props.myAttr): вместо этого применяется деструктуризация props-объекта.

#React

React - cмысл Key:

В Реакт есть сущность - key. Это уникальный идентификатор реакт-компонента. Применяется, в частности, в построении списков при передаче массивов в качестве props.

Его задача - оптимизировать производительность. При перерисовке вирутального дом-дерева Реакт сравнивает между собой не компоненты, которые могут быть тяжеловесными, а только их key. Это похоже на механизм NodeJS для передачи больших файлов без их считывания или маркировку HTTP-пакетов легковесным заголовком. Таким образом Реакт выполняет меньше работы и работает еще быстрее.

Если keys не указываются явно, Реакт сам проставляет их - но это будет простая нумерация. Сравнение по нумерации не обеспечивает производительности.

Аналогичен результат с использованием индексов массивов как keys. Реакт и так по-умолчанию маркирует элементы нумерацией, а это непроизводительный способ.

#React

React - привязка методов

В классах Реакта можно заметить биндинг методов-обработчиков событий:

this.method = this.method.bind(this)

Биндинг внутри класса может показаться нелогичным. Виновник потребности в нем - потеря контекста this, когда метод присваивается другой переменной:

<element onClick=this.method>

Биндинг связывает this с контекстом класса, и контекст уже не теряется.

Есть и другие способы привязки this в классе. Подробнее:
https://getinstance.info/articles/react/react-and-es6-part3/

#React #JS

Тонкости импорта

В нативных модулях ES6 параметр import принимает строкой путь к модулю:

import React from 'react'

Этот путь может быть нескольких видов. Относительный и абсолютный используется по-умолчанию для кастомных модулей:
'./relativePath'
'/absolute/Path'/

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

Есть два предположения, почему так происходит:

1. Такой способ импорта допустим для встроенных модулей и библиотек со специфическими настройками;
2. Такой способ специфичен для Webpack.

А вы как думаете?

#JS #React

Спасибо всем, кто участвовал в опросе.
Верный вариант - специфика Webpack.

Дело в том, что приложения Реакт создаются для бразузера. Директива import для именованных импортов - как в случае импорта Реакта - не поддерживается большинством браузеров, поэтому Реакт использует для сборки Webpack. Который, в свою очередь, ищет пути к модулям, импортированным так, в папке node_modules. Неочевидное поведение, которое полезно держать в голове.

#JS #React #Webpack

Полезные практики в React:

- Сократить код обращения к this.state можно, пользуясь деструктуризацией:

const { firstState, secondState } = this.state

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

const handler = itemToFind => item => item.title.includes(itemTiFind)

Здесь функция handler возвращает функцию, которая передается, например, в map и используется для фильтрации.

#React #JS

Работа браузера: рендеринг в деталях

Как процесс, рендеринг выглядит так:

1. Браузер формирует из HTML DOM-дерево...
2. Затем обрабатывает CSS и создает CSSOM.
3. На их основе создается Rendering Tree.
4. Вычисляется положение элементов на странице.
5. Происходит painting.

На этом ничего не заканчивается. Рендеринг - динамическая операция: некоторые шаги повторяются вновь и вновь, меняя структуру документа.

Некоторые операции более затратны для браузера (layout), другие - менее (repainting, или перерисовка свойств, не затрагивающих положения элемента на странице). Знания этих деталей могут помочь с микро-оптимизациями. Впрочем, современные движки хорошо оптимизируют рендеринг автоматически - существенного выигрыша в производительности не будет.

Одна из механик автоматической оптимизации - кэширование repainting-а и relayout-а: бразуер по возможности выполняет потоки команд, входящих в эти операции, едиными блоками.

На этой механке построено преимущество реактивных фреймворков. Реакт строит облегченный Virtual DOM, не содержащий ничего лишнего, тогда как "родной" DOM напичкан неиспользуемыми браузерными правилами и т.п. События на странице затрагивают только связаные с ними компоненты, остальное виртуальное дерево остается нетронутым.

Неизбежен, однако, риторический вопрос: почему сайты на Реакте такие тормозутые?..

#браузеры #рендеринг #React