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

- Проще отслеживать изменения. Если, например, для хранения 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

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

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

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

Элементы 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

JS - о rest-операторе:

Оператор 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

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

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

Решение для 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

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

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

#JS #React #Webpack

jQuery - лучшие практики:

- Для подключения:
1. Всегда оставлять возможность загрузки локальной копии:
window.jQuery || document.write(путь к CDN)
2. В пути к CDN опускать протокол:
//...путь

- Для переменных:
1. Желательно сохранять jQuery-объекты в переменные, таким образом кэшируя их.
2. Созданные для этого переменные желательно именовать с префиксом $: const $selectors = $(...)

- Для селекторов:
1. Предпочтительно использовать ID-селекторы.
2. Для поиска дочерних вложенных элементов предпочтительнее метод .find(), чем указание вложенности в селекторе:
$("#products").find("div.id");
3. Вообще конкретизировать область поиска селекторов:
$('.class', '#class-container');
4. Не смешивать ID с другими селекторами (теряется оптимизация поиска).

- Обработка DOM:
1. Если элемент нужно обработать, его нужно извлечь из DOM с сохранением информации о нем. Для этого используется .detach():
let $myList = $("...").detach();
//... действия по обработке $myList
$myList.appendTo("#list-container");
2. Если элемента может не быть на странице, нужно выполнять проверку его присутствия, прежде чем запускать логику взаимодействия.

#JS #jQuery #best_practices

jQuery - лучшие практики, часть 2:

- События:
1. Использовать только один обработчик события document.ready, а не распихивать код по нескольким.
2. Описывать функции обработки событий вне обработчика, передавая ему только имя функции. Выгода - читабельность, легкость отладки.
3. Используя jQuery, стоит всегда назначать события через него - без инлайн-кода. Выгода - консистентность.

- Анимация:
1. Лучше предустановленные значения скорости анимации, чем кастомные.

- Плагины:
1. Хорошо задокументированные популярные плагины предпочтительнее - сообщество следит за багами и уязвимостями.

- Чейнинг:
1. Чейнинг методов предпочтительнее создания новых переменных или селекторов. Для легкости чтения звенья лучше разносить по строкам. В длинных цепочках можно кэшировать промежуточные объекты.

- Прочее:
1. Для передачи нескольких однотипных параметров лучше не вызывать метод несколько раз, а передать параметры литералом объекта:

$myLink.attr({
href: "#",
title: "my link",
rel: "external"
});

2. Не стоит писать CSS прямо в jQuery, вместо этого лучше определить правило в таблице стилей и передавать его элементу.

Warning! Часть инфы может быть неактуальной для новых версий jQuery.

#JS #jQuery #best_practices

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

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

const { firstState, secondState } = this.state

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

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

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

#React #JS

Особенности C#

- В этом языке переменные можно открывать как привычным var, так и значением типа: int, float, char...

- Прежде чем использовать, например, вывод в консоль, нужно включить в файл класс содержащий метод, как делается в C или Go:

using System;
...код классов
System.Console.WriteLine

- Нельзя в C# просто проверять значение переменной в условии:
int a = 4;
if(a) ... // не сработает!
Чтобы код работал, нужно задать связанную булевую переменную:
bool b = a == 4;
Также булевым присваиваются значения логических сравнений:

bool result = a <= b; // переменная result содержит результат сравнения.

- В C# нет оператора строго равенства, aka ===, так как это язык со строгой типизацией и в таком операторе нет необходимости.

- Массивы открываются с помощью кострукции:
тип_переменной[] = { ... }.
Есть и другие способы - например, определение пустого массива на n элементов.

- Массивы C# не динамические. Аналог динамических массивов из JS - тип list. Пример создания листа:
List<int> nums = new List<int>()

- Аналог объекта ключей-значений из JS в C# - это словарь.
Словари создаются примерно так же, как листы, но принимают два аргумента типов - для ключа и для значения.

#Сишарп

Командная строка - памятка по навигации:

- mkdir: создать папку
- touch: создать файл
- ls: показать содержимое директории
- cd some-path - переместиться в указанную папку
- cd .. - подняться на уровень выше

Продвинутое:
- Создать вложенную структуру папок: mkdir -p some-folder/{one,two,three}. Важно: между аргументами в {} не должно быть пробелов!

#bash

CSS по БЭМ - опыт, плюсы и минусы:

+ Легкость именования: фантазия больше не нужна! Имитация пространства имен сводит подбор названий классов к узкому списку.
+ Переиспользуемость: блочная архитектура располагает к переносу блоков в любые части сайта, не парясь о каскаде.
+ Препроцессор-френдли: на LESS/SCSS код блока с элементами и модификаторами выглядит изящно и логично.
+ Дробление: архитектура БЭМ прям подталкивает делить блоки на отдельные файлы. Это выгодно даже для лендингов - быстрее собрать проект из готовых унифицированных блоков, чем писать монолит HTML и стилей с нуля.

- Громоздкость: именование по БЭМ вручную - то еще удовольствие. Особенно при миксовании блоков с элементами или добавлении модификаторов к элменетам:
header__link—white
И это еще не худший случай!
Проблему решают инструменты автогенерации БЭМ-блоков. Например: https://gist.github.com/nicothin/1ba505f7cdfbe969600afcad6d9f1d33

#CSS #BEM