Терминология:
- Инстанс: экземпляр класса или объекта. Условный оператор JS instanceof примерно переводится как "экземпляр того" и возвращает true или false в зависимости от того, принадлежит ли объект слева коструктору справа.
- Диспатчинг: перенаправление. Например, в MVC View отлавливает событие и диспатчит в controller.
- Бизнес-логика: уровень абстракции, элемент шаблона проектирования. В MVC бизнес-логика находится на уровне model.
- Уровни абстракции - это как бы уровни распределения ответственности в фирме: от файлов-отделов, содержащих отдельные процедурные функции, к руководителям среднего звена, имеющим дело с показателями отделов, и высшего, которые определяют общую стратегию.
- Инстанс: экземпляр класса или объекта. Условный оператор JS instanceof примерно переводится как "экземпляр того" и возвращает true или false в зависимости от того, принадлежит ли объект слева коструктору справа.
- Диспатчинг: перенаправление. Например, в MVC View отлавливает событие и диспатчит в controller.
- Бизнес-логика: уровень абстракции, элемент шаблона проектирования. В MVC бизнес-логика находится на уровне model.
- Уровни абстракции - это как бы уровни распределения ответственности в фирме: от файлов-отделов, содержащих отдельные процедурные функции, к руководителям среднего звена, имеющим дело с показателями отделов, и высшего, которые определяют общую стратегию.
Напоминалки:
Быстрые клавиши в VSCode: File - Preferences - Keyboard Shortcuts
Шорткаты в Гит:
git config --global alias.command-name "command-block"
#шорткаты
Быстрые клавиши в VSCode: File - Preferences - Keyboard Shortcuts
Шорткаты в Гит:
git config --global alias.command-name "command-block"
#шорткаты
Принципы React - повторение:
- Поток данных в Реакте идёт по нисходящей, от родителей к детям. Например, если компонент рендерит 9 более мелких компонентов, данные - пропсы - передаются от этого крупного компонента в мелкий, который и обрабатывает их. Так работает декларативность React.
- В обработчиках компонентов допустимы (и желательны) стрелочные функции.
- State - это "память" компонентов. Например, с помощью state компонент запоминает, что по нему кликнули.
- Без Redux state хранится прямо в компонентах, в кострукторе их классов. У функциональных компонентов state нет: они так и называются - stateless components.
- Как и в PHP, при объявлении конструктора класса-наследника нужно вызвать конструктор родителя. В JS это нужно делать до вызова собственного конструктора наследника.
#react
- Поток данных в Реакте идёт по нисходящей, от родителей к детям. Например, если компонент рендерит 9 более мелких компонентов, данные - пропсы - передаются от этого крупного компонента в мелкий, который и обрабатывает их. Так работает декларативность React.
- В обработчиках компонентов допустимы (и желательны) стрелочные функции.
- State - это "память" компонентов. Например, с помощью state компонент запоминает, что по нему кликнули.
- Без Redux state хранится прямо в компонентах, в кострукторе их классов. У функциональных компонентов state нет: они так и называются - stateless components.
- Как и в PHP, при объявлении конструктора класса-наследника нужно вызвать конструктор родителя. В JS это нужно делать до вызова собственного конструктора наследника.
#react
Принципы Реакт - продолжение:
- Контролируемые компоненты: это компоненты, полностью зависимые от родительских. У них нет своего state и, как правило, своих методов, кроме render. Их состояние хранится в родительских компонентах, а методы передаются через props.
- В парадигме MVC Реакту отводится место View. Реакт - просто библиотека рендеринга. Разного рода рассчеты, валидация, обработка информации, кроме относящейся к интерфейсу, - все это принадлежит к бизнес-логике и не должно быть определено в компонентах.
- Атрибуты ref могут привести к выстроению императивной системы. Для React это антипаттерн. Об этом позже.
- Функциональные компоненты - способ проектирования Реакт-компонентов, у которых есть только метод render, а остальная информация передается через props. Это более быстрый и чистый способ написания контролируемых компонентов.
#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
- Для копирования объектов есть функция 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 #Иммутабельность
- Проще отслеживать изменения. Если, например, для хранения state используется один мутабельный объект, для отслеживания изменений его нужно перебирать заново. Если же используется иммутабельность, то отслеживается только название объекта: если оно отличается - состояние изменено.
- Проще выполнить сложные задачи, такие как откат к состоянию, отделенному промежуточными операциями.
- Легко выполнять ре-рендеринг компонентов.
- Способствует созданию "чистых" компонентов.
#React #Иммутабельность
JS: spread-оператор для массивов
- Как выглядит spread-оператор:
let clone = [...array];
Внешне он похож на rest-оператор.
- Что он делает?
Раскладывает массив на отдельные элементы.
- Какие задачи решает?
1. Передача массива функции. В ES5 для этого требовался метод apply либо другие, более сложные кастомные функции. Spread упрощает задачу:
const test = (...array) => array.map((i) => i * 2);
console.log(test(...[5, 4, 3])) // 10, 8, 6
2. Клонирование массива (свойств, но не ссылки на оригинал):
const array = [a, b, c];
const clone = [...array]; // [a, b, c]
3. Преобразование коллекций в массивы:
const links = [...document.querySelectorAll('a')];
#JS
- Как выглядит spread-оператор:
let clone = [...array];
Внешне он похож на rest-оператор.
- Что он делает?
Раскладывает массив на отдельные элементы.
- Какие задачи решает?
1. Передача массива функции. В ES5 для этого требовался метод apply либо другие, более сложные кастомные функции. Spread упрощает задачу:
const test = (...array) => array.map((i) => i * 2);
console.log(test(...[5, 4, 3])) // 10, 8, 6
2. Клонирование массива (свойств, но не ссылки на оригинал):
const array = [a, b, c];
const clone = [...array]; // [a, b, c]
3. Преобразование коллекций в массивы:
const links = [...document.querySelectorAll('a')];
#JS
JS - деструктуризация объектов:
Рассмотрим сложный случай:
const { hello, bye, space: { full = 'Vacuum' } = {} } = obj;
Что здесь происходит:
1. Объявляется константа.
2. Ей присваевается объект obj;
3. В фигурных скобках создаются константы с именами свойств этого объекта - hello, bye, space, full.
4. Константа space содержит значение по-умолчанию:
1. Если в объекте нет значения space, оно задаётся как новый пустой объект;
2. Если в новом объекте нет значения full (а его там нет), создается константа full со значением по-умолчанию "Vacuum". Если в объект добавить такое свойство, значение по-умолчанию будет проигнорировано.
Боевое применение деструктуризации (и значений по-умолчанию):
Когда функции или модулю передается объект опций, можно деструктурировать его и одновременно присвоить значения по-умолчанию прямо на входе:
const handlerFunction = ({login = 'admin', port = '860'} = {}) => { // some code }
Заметим, что объекту опций по-умолчанию присвоен пустой объект: так обходится ошибка при вызове функций полностью без аргументов.
Деструктуризация помогает в создании копий объектов или включении их в новый, не используя Object.assign:
const clone = { ...src1, ...src2 }
#JS
Рассмотрим сложный случай:
const { hello, bye, space: { full = 'Vacuum' } = {} } = obj;
Что здесь происходит:
1. Объявляется константа.
2. Ей присваевается объект obj;
3. В фигурных скобках создаются константы с именами свойств этого объекта - hello, bye, space, full.
4. Константа space содержит значение по-умолчанию:
1. Если в объекте нет значения space, оно задаётся как новый пустой объект;
2. Если в новом объекте нет значения full (а его там нет), создается константа full со значением по-умолчанию "Vacuum". Если в объект добавить такое свойство, значение по-умолчанию будет проигнорировано.
Боевое применение деструктуризации (и значений по-умолчанию):
Когда функции или модулю передается объект опций, можно деструктурировать его и одновременно присвоить значения по-умолчанию прямо на входе:
const handlerFunction = ({login = 'admin', port = '860'} = {}) => { // some code }
Заметим, что объекту опций по-умолчанию присвоен пустой объект: так обходится ошибка при вызове функций полностью без аргументов.
Деструктуризация помогает в создании копий объектов или включении их в новый, не используя Object.assign:
const clone = { ...src1, ...src2 }
#JS
JS - деструктуризация массивов:
Из особенностей деструктуризации массивов можно отметить возможность пропуска элемента:
const arr = ['hello', 'world', 'space', 'name'];
const [,one, ...two] = arr;
// one = world, two = ['space', 'name']
Такая деструктуризация поддерживает и значения по-умолчанию.
#JS
Из особенностей деструктуризации массивов можно отметить возможность пропуска элемента:
const arr = ['hello', 'world', 'space', 'name'];
const [,one, ...two] = arr;
// one = world, two = ['space', 'name']
Такая деструктуризация поддерживает и значения по-умолчанию.
#JS
JS - прототипы:
Есть несколько способов относительно явно присвоить прототип. Я ограничусь примерами кода:
1. Object.setPrototypeOf(newObject, prototype) - не рекомендуется из-за проблем с производительностью.
2. let obj = Object.create(prototype) - проблема в отсутствии свойств. Решается созданием обертки.
3. Классика (самый удобный способ):
function Obj() {};
Obj.prototype.method = function(){};
4. obj.__proto__ = prototype. Не рекомендуется, как и setPrototypeOf.
#JS
Есть несколько способов относительно явно присвоить прототип. Я ограничусь примерами кода:
1. Object.setPrototypeOf(newObject, prototype) - не рекомендуется из-за проблем с производительностью.
2. let obj = Object.create(prototype) - проблема в отсутствии свойств. Решается созданием обертки.
3. Классика (самый удобный способ):
function Obj() {};
Obj.prototype.method = function(){};
4. obj.__proto__ = prototype. Не рекомендуется, как и setPrototypeOf.
#JS
JS - замечания о классах:
- появились статические свойства, привязанные к классу. Задаются они ключевым словом static - неожиданно, правда?
- методы, заданные в конструкторе, привязываются к объекту класса, их this ссылается на этот объект. Поэтому не нужно такие методы привязывать:
this.method.bind(this)
#JS
- появились статические свойства, привязанные к классу. Задаются они ключевым словом static - неожиданно, правда?
- методы, заданные в конструкторе, привязываются к объекту класса, их this ссылается на этот объект. Поэтому не нужно такие методы привязывать:
this.method.bind(this)
#JS
Реакт - заметка об элементах:
Элементы React - это, по сути, объекты. Благодаря этому мы можем передавать их, как аргументы, в функции и управлять ими привычным для объектов способами. Важный вывод:
- props, key и другие важные сущности React - это просто ключи объектов, которыми под капотом являются элементы.
#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
- Компоненты Реакт - это функции или классы, которые возвращают Реакт-элементы. Ничего больше.
- Компоненты Реакт "вызываются" в 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
В Реакт есть сущность - key. Это уникальный идентификатор реакт-компонента. Применяется, в частности, в построении списков при передаче массивов в качестве props.
Его задача - оптимизировать производительность. При перерисовке вирутального дом-дерева Реакт сравнивает между собой не компоненты, которые могут быть тяжеловесными, а только их key. Это похоже на механизм NodeJS для передачи больших файлов без их считывания или маркировку HTTP-пакетов легковесным заголовком. Таким образом Реакт выполняет меньше работы и работает еще быстрее.
Если keys не указываются явно, Реакт сам проставляет их - но это будет простая нумерация. Сравнение по нумерации не обеспечивает производительности.
Аналогичен результат с использованием индексов массивов как keys. Реакт и так по-умолчанию маркирует элементы нумерацией, а это непроизводительный способ.
#React
JS - о rest-операторе:
Оператор rest при деструктуризации собирает не последние оставшиеся свойства, а все, кроме тех, с которыми деструктуризация была выполнена явно:
const { id, ...rest } = targetObject;
Здесь id будет иметь значение id из targetObject, а ...rest - соберет все остальные, как перед, так и после id.
Таким образом можно без труда разделить объект на нужные части и передавать в разные части приложения только их, а не весь объект.
#JS
Оператор rest при деструктуризации собирает не последние оставшиеся свойства, а все, кроме тех, с которыми деструктуризация была выполнена явно:
const { id, ...rest } = targetObject;
Здесь id будет иметь значение id из targetObject, а ...rest - соберет все остальные, как перед, так и после id.
Таким образом можно без труда разделить объект на нужные части и передавать в разные части приложения только их, а не весь объект.
#JS
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
В классах Реакта можно заметить биндинг методов-обработчиков событий:
this.method = this.method.bind(this)
Биндинг внутри класса может показаться нелогичным. Виновник потребности в нем - потеря контекста this, когда метод присваивается другой переменной:
<element onClick=this.method>
Биндинг связывает this с контекстом класса, и контекст уже не теряется.
Есть и другие способы привязки this в классе. Подробнее:
https://getinstance.info/articles/react/react-and-es6-part3/
#React #JS
getinstance.info
React и ES6 - Часть 3, Биндинг методов в классах React (включая ES7)
Статьи о фронтенд-разработке: HTML, CSS, JavaScript, фреймворки и инструменты фронтендера, уроки и переводы зарубежных статей по веб-разработке
Как освободить порт на локалхосте
В разработке бывает, что приложение остается висеть на порту даже после закрытия. В моем случае такой сюрприз преподнесла сборка Реакт на вебпаке.
Решение для git bash:
1. netstat -ano | findstr :your-port
На выходе получаем таблицу вида:
TCP 0.0.0.0:your-port 0.0.0.0:0 LISTENING 8876
Здесь 8836 - PID процесса. Он понадобится позже. Вводим команду:
2.taskkill //PID your-pid //F
Если все пройдет успешно, получаем об этом сообщение.
#разное
В разработке бывает, что приложение остается висеть на порту даже после закрытия. В моем случае такой сюрприз преподнесла сборка Реакт на вебпаке.
Решение для git bash:
1. netstat -ano | findstr :your-port
На выходе получаем таблицу вида:
TCP 0.0.0.0:your-port 0.0.0.0:0 LISTENING 8876
Здесь 8836 - PID процесса. Он понадобится позже. Вводим команду:
2.taskkill //PID your-pid //F
Если все пройдет успешно, получаем об этом сообщение.
#разное
Тонкости импорта
В нативных модулях ES6 параметр import принимает строкой путь к модулю:
import React from 'react'
Этот путь может быть нескольких видов. Относительный и абсолютный используется по-умолчанию для кастомных модулей:
'./relativePath'
'/absolute/Path'/
Есть и третий вариант - им начинается заметка.
Обычный модуль так подключить нельзя, даже если он расположен в той же папке, что и импортирующий.
Есть два предположения, почему так происходит:
1. Такой способ импорта допустим для встроенных модулей и библиотек со специфическими настройками;
2. Такой способ специфичен для Webpack.
А вы как думаете?
#JS #React
В нативных модулях ES6 параметр import принимает строкой путь к модулю:
import React from 'react'
Этот путь может быть нескольких видов. Относительный и абсолютный используется по-умолчанию для кастомных модулей:
'./relativePath'
'/absolute/Path'/
Есть и третий вариант - им начинается заметка.
Обычный модуль так подключить нельзя, даже если он расположен в той же папке, что и импортирующий.
Есть два предположения, почему так происходит:
1. Такой способ импорта допустим для встроенных модулей и библиотек со специфическими настройками;
2. Такой способ специфичен для Webpack.
А вы как думаете?
#JS #React
Спасибо всем, кто участвовал в опросе.
Верный вариант - специфика Webpack.
Дело в том, что приложения Реакт создаются для бразузера. Директива import для именованных импортов - как в случае импорта Реакта - не поддерживается большинством браузеров, поэтому Реакт использует для сборки Webpack. Который, в свою очередь, ищет пути к модулям, импортированным так, в папке node_modules. Неочевидное поведение, которое полезно держать в голове.
#JS #React #Webpack
Верный вариант - специфика Webpack.
Дело в том, что приложения Реакт создаются для бразузера. Директива import для именованных импортов - как в случае импорта Реакта - не поддерживается большинством браузеров, поэтому Реакт использует для сборки Webpack. Который, в свою очередь, ищет пути к модулям, импортированным так, в папке node_modules. Неочевидное поведение, которое полезно держать в голове.
#JS #React #Webpack