​Как создать компонент высшего порядка (Higher Order Component, HOC)?

Компонент высшего порядка - это функция, принимающая компонент и возвращающая новый компонент. Это продвинутая техника, позволяющая повторно использовать логику компонента. HOC не являются частью React API. HOC является паттерном, производным от композиционной природы React. Компонент преобразует пропы в UI, а HOC трансформирует один компонент в другой. Примерами популярных HOC являются методы connect() в Redux и createContainer() в Relay.

 // HOC.js
 import React, { Component } from 'react'

 export default function Hoc(HocComponent){
     return class extends Component{
         render(){
             return (
                 <div>
                   <HocComponent></HocComponent>
                 </div>
             )
         }
     }
 }

 // App.js
 import React, { Component } from 'react'
 import Hoc from './HOC'

 class App extends Component {
   render() {
     return (
       <div>
         Пример компонента высшего порядка!
       </div>
     )
   } 
 }
 App = Hoc(App)
 export default App

Обратите внимание:
Мы не модифицируем компоненты, а создаем новые
HOC используются для композиции компонентов для обеспечения возможности повторного использования кода
HOC являются "чистыми" функциями. Они не имеют побочных эффектов (side effects) и всегда возвращают одинаковые результаты для одних и тех же аргументов

​Что такое "чистый" компонент (Pure Component) в React?

Pure Components - это компоненты, которые не рендерятся повторно при обновлении их состояния и пропов одними и теми же значениями. Если значение предыдущего и нового состояния и пропов равны, компонент не отрисовывается повторно. "Чистые" компоненты ограничивают повторный рендеринг, обеспечивая повышение производительности приложения.

Особенности "чистых" компонентов:
1. Предотвращают повторный рендеринг компонента, если его состояние и пропы остались прежними
2. Неявно реализуют метод shouldComponentUpdate()
3. state и props сравниваются поверхностно
4. В ряде случаев, такие компоненты являются более производительными
По аналогии с "чистыми" функциями в JavaScript, React-компонент считается "чистым", если он возвращает (рендерит) одинаковый результат для одних и тех же значений пропов и состояния. Для создания таких компонентов React предоставляет базовый класс PureComponent. Классовый компонент, расширяющий React.PureComponent, обрабатывается как "чистый" компонент.

"Чистые" компоненты похожи на обычные, за исключением того, что они неявно реализуют метод shouldComponentUpdate(), проводя поверхностное сравнение состояния и пропов. Если текущие и следующие состояние и пропы являются одинаковыми, повторный рендеринг компонента не выполняется.

React-компоненты перерисовываются в следующих случаях:
1. В компоненте вызывается setState()
2. Обновляются значения props
3. Вызывается forceUpdate()
"Чистые" компоненты не перерисовываются вслепую, без оценки значений state и props. Если обновленные значения аналогичны предыдущим, повторный рендеринг не запускается.

Web-программирование на JavaScript.

В книге делается акцент на актуальную версию стандарта ES2015 (ES6) и не рассматриваются устаревшие возможности. Технология DOM выделена в отдельную часть книги, так как является самостоятельной, но может быть реализована посредством JavaScript.
Потенциал DOM, выражающийся в возможности любого динамического изменения контента веб-страницы, позволяет создавать не просто веб-страницы, а веб-приложения. Учебное пособие предназначено и для освоения основ современного объектного программирования и для знакомства с технологией расширения функционала веб-страниц и придания им динамичности и интерактивности на уровне клиента. В последнем случае требуется наличие знаний технологий HTML и CSS.

IQ Тест

Боб готовится сдавать IQ Тест. Самое распространенное задание в этом тесте - найти число, которое чем-то отличается от других. Боб обнаружил, что обычно это число отличается четностью или нечетностью. Помогите Бобу написать программу, которая будет находить это число и возвращать его номер. При этом отсчет начинается не с 0, а с 1.

Примеры:

iqTest("2 4 7 8 10") => 3 // Третье число нечетное, а остальные четные
iqTest("1 2 1 1") => 2 // Второе число четное, а остальные нечетные

Современный JavaScript для нетерпеливых.

Данная книга – полное, но при этом лаконичное руководство по версии JavaScript E6 и выше. Вам не потребуется знаний старых версий языка, а сразу предлагается начать с более мощных современных.

Автор бестселлеров Кэй С. Хорстман рассказывает обо всем, что вам необходимо знать, излагая материал небольшими порциями, рассчитанными на легкое усвоение. Практические советы и примеры кода помогут эффективно воспользоваться всеми новшествами, избежать подводных камней и устаревших средств и извлечь максимум пользы из надежных инструментов и фреймворков для разработки ПО на современном JavaScript.

​Почему виртуальный DOM является более эффективным, чем "грязная" проверка (dirty check)?

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

Виртуальный DOM имеет почти такие же свойства, что и настоящий DOM, но он не может напрямую модифицировать содержимое (контент) страницы. Манипуляции с виртуальным DOM быстрее, поскольку он ничего не обновляет на экране. Простыми словами, работа с виртуальным DOM - это работа с копией реального DOM, не более того.

Обновление виртуального DOM быстрее благодаря следующему:
1. Использованию эффективного алгоритма определения различий
2. Совмещению (группировке, объединению) операций по обновлению
3. Оптимизированному обновлению поддеревьев
4. Использованию наблюдаемых объектов для определения изменений вместо "грязной" проверки
5. Как работает виртуальный DOM

При рендеринге JSX-элемента обновляется виртуальный DOM. Это происходит очень быстро. После обновления новая версия виртуального DOM сравнивается со старой (снимком, выполненным перед обновлением). После этого, React определяет отличия между двумя объектами. Данный процесс называется diffing.

Затем React обновляет только те части браузерного DOM, которые подверглись изменениям. За счет этого React очень сильно выигрывает в производительности.

Если кратко, то вот что происходит при обновлении DOM в React:
1. Обновляется виртуальный DOM
2. Обновленный виртуальный DOM сравнивается с предыдущим
3. Определяются различия между версиями виртуального DOM
4. Обновляются только изменившиеся элементы браузерного DOM
5. Изменения отображаются на экране

​Почему функция setState() в React является асинхронной, а не синхронной?

Даже если состояние обновляется синхронно, пропы - всегда асинхронно. Это означает, что значение пропов является неопределенным до повторного рендеринга родительского компонента. Объекты, предоставляемые React (state, props, refs), согласованы между собой. Если вы реализуете синхронный setState(), то могут возникнуть проблемы.

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

Это связано с тем, что setState() изменяет состояние и приводит к повторному рендерингу. Если операция обновления состояние будет синхронной и при этом дорогой с точки зрения производительности, то браузер пользователя лишится интерактивности (перестанет отвечать на действия пользователя до завершения операции). Поэтому такие операции являются асинхронными и группируются для обеспечения лучшего пользовательского опыта и повышения производительности.

Разделяй и Властвуй

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

Примеры:
divCon([9, 3, '7', '3']) => 2
divCon(['5', '0', 9, 3, 2, 1, '9', 6, 7]) => 14
divCon(['3', 6, 6, 0, '5', 8, 5, '6', 2,'0']) => 13

Что такое управляемые и неуправляемые компоненты?

В управляемых компонентах данные формы обрабатываются React-компонентом. Альтернативой являются неуправляемые компоненты, где данные формы обрабатываются DOM.

Управляемые компоненты
В управляемых компонентах данные формы обрабатываются с помощью состояния компонента. Состояние компонента выступает в роли "единственного источника истины" (single source of truth) для "инпутов" компонента.

Неуправляемые компоненты
Неуправляемые компоненты похожи на обычные HTML-элементы. Данные каждого "инпута" сохраняются в DOM, а не в компоненте. Вместо обработчиков событий для обновления состояния, в таких компонента используются refs (ссылки, references) для извлечения значений из DOM. Ссылки позволяют получать доступ к узлам DOM или элементам React, создаваемым в методе render():