Асинхронное программирование в однопоточных средах JavaScript

Моя прошлая обучающая статья Введение в Redux & React-redux набрала больше 100к просмотров. Что же это не может не радовать меня. И поэтому я решил порадовать и вас написав очередную статью по JavaScript. Хотя если честно я не хотел больше писать статьи поскольку это довольно сложно, занимает уйму времени и сил, а еще мне не платят за всю эту научную работу. Так что следующую статью я напишу только если эта наберет 150к просмотров.

Оглавление

1. Введение в асинхронное программирование
2. Цикл событий
3. Отложенное выполнение кода с помощью setTimeout setImmediate и process.nextTick
....3.1 setTimeout
....3.2 setImmediate
....3.3 process.nextTick
4. Устаревшие паттерны асинхронного программирования
5. Promise
....5.1 Основы Promise
....5.2 Методы экземпляра Promise
........5.2.1 Promise.prototype.then
........5.2.2 Promise.prototype.catch
........5.2.3 Promise.prototype.finally
....5.3 Композиция и цепочки промисов
........5.3.1 Графы промисов
........5.3.2 Параллельная композиция промисов с Promise.all и Promise.race
........5.3.3 Серийная композиция промисов
6. Асинхронные функции
....6.1 Остановка и возобновление выполнения
....6.2 Стратегии для асинхронных функций
........6.2.1 Реализация Sleep
........6.2.2 Максимизация распараллеливания
........6.2.3 Серийное выполнение промисов
........6.2.4 Трассировка стека и управление памятью

1. Введение в асинхронное программирование

Я писал super(props) большое количество раз в жизни, и хотел бы знать:

class Checkbox extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isOn: true };
  }
  // ...
}

Конечно, class fields proposal позволяет нам пропустить церемонию инициализации:

class Checkbox extends React.Component {
  state = { isOn: true };
  // ...
}

Подобный синтаксис был запланирован, когда в React 0.13 была добавлена ​​поддержка простых классов в 2015 году. Определение конструктора и вызов super(props) всегда предполагалось как временное решение, пока поля класса не предоставят эргономичную альтернативу.

Но вернемся к этому примеру, используя только функции ES2015:

class Checkbox extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isOn: true };
  }
  // ...
}

Здесь у вас не избежно должны возникнуть следующие вопросы: Почему мы вызываем super? Можем ли мы не вызывать его? Если нам нужно вызвать его, что произойдет, если мы не передадим props? Есть ли другие аргументы?

Оглавление

Введение
1. Установка и начало работы
2. Redux
....2.1 createStore
....2.2 reducer()
....2.3 dispatch()
....2.4 actionCreator()
....2.5 Actions
....2.6 getState()
....2.7 subscribe()
....2.8 combineReducers()
....2.9 initialState
3. React-redux
....3.1 Provider
....3.2 mapStateToProps()
....3.3 mapDispatchToProps()
....3.4 connect()

Введение

Вот вы прочитали мою статью про React (если нет, то настоятельно рекомендую вам сделать это) и начали разрабатывать приложения на нём. Но что это? Вы замечаете, как с расширением вашего приложения становится всё сложнее следить за текущим состоянием, сложно следить за тем, когда и какие компоненты рендарятся, когда они не рендарятся и почему они не рендарятся, сложно следить за потоком изменяющихся данных. Для этого и есть библиотека Redux. Сам React хоть и лёгкий, но для комфортной разработки на нем нужно много чего изучить.

Оглавление
1. Getting started with React
....1.1 Методы добавления React
....1.2 Выбор метода добавления
........1.2.1 Добавление React с помощью тэга <script />
........1.2.2 Добавление React с помощью create-react-app
2. Basically React
....2.1 React object
....2.2 React element
........2.2.1 CreateElement
........2.2.2 CloneElement
........2.2.3 IsValidElement
........2.2.4 Children
....2.3 React компоненты
........2.3.1 React.Component
........2.3.2 React.Fragment
.........2.3.3 State
.........2.3.4 Events
.........2.3.5 Lifecycle
.........2.3.6 Refs
....2.4 ReactDOM
........2.4.1 Render
........2.4.2 Hydrate
........2.4.3 UnmountComponentAtNode
........2.4.4 CreatePortal
3. Other topics
....3.1 Lists and Keys
....3.2 Error Handling
........3.2.1 getDerivedStateFromError
........3.2.2 componentDidCatch
Заключение

React — JavaScript-библиотека с открытым исходным кодом для разработки пользовательских интерфейсов.

1. Getting started with React

1.1 Методы добавления React

Существует 2 основных метода для добавления React на сайт:

1. С помощью тэга <script />
2. С помощью create-react-app

1.2 Выбор метода добавления

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

1.2.1 Добавление React с помощью тэга <script />

Шаг 1 Добавьте 3 тега в контейнер head на вашей странице:

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

Здесь подключаются библиотеки React и React-dom, а также компилятор babel.

Babel не является обязательным для использования React, но полезным для написания кода UI, с помощью JSX.

Шаг 2 Добавьте пустой контейнер на вашу страницу чтобы отметить место, где вы хотите что-либо отобразить с помощью React.

Оглавление

Предисловие
Краткий обзор ES7
1. Object.entries
2. Object.values
3. String.prototype.padEnd
4. String.prototype.padStart
5. Object.getOwnPropertyDescriptor
6. Trailing commas
7. SharedArrayBuffer
8. Atomics
9. Async functions

Предисловие

Здравствуйте, в прошлом я уже рассматривал нововведения в ES6 и теперь время разобрать ES8 так как он принёс много нового. Рассматривать отдельно ES7 (2016), я не стал так как этот релиз принёс всего 2 нововведения. Это Array.prototype.includes() и оператор возведения в степень. Но всё же прежде чем приступить к ES8, давайте рассмотрим нововведения из ES7.

Краткий обзор ES7

Метод includes() определяет, содержит ли массив определённый элемент, возвращая в зависимости от этого true или false.

Array.prototype.includes(searchElement[, fromIndex = 0]) : Boolean

searchElement — Искомый элемент.

fromIndex — Позиция в массиве, с которой начинать поиск элемента searchElement. При отрицательных значениях поиск производится начиная с индекса array.length + fromIndex по возрастанию. Значение по умолчанию равно 0.

Оглавление

Предисловие
1. Настройка git
....1.1 Конфигурационные файлы
....1.2 Настройки по умолчанию
....1.3 Псевдонимы (aliases)
2. Основы git
....2.1 Создание репозитория
....2.2 Состояние файлов
....2.3 Работа с индексом
....2.4 Работа с коммитами
....2.5 Просмотр истории
....2.6 Работа с удалённым репозиторием
3. Ветвление в git
....3.1 Базовые операций
....3.2 Слияние веток
....3.3 Rerere
4. Указатели в git
....4.1 Перемещение указателей
5. Рекомендуемая литература

Предисловие

Git — самая популярная распределённая система контроля версиями.[1][2]

Основное предназначение Git – это сохранение снимков последовательно улучшающихся состояний вашего проекта (Pro git, 2019).

Введение в ES6

Оглавление
1. Template literals
2. let and const
3. Arrow function expressions
4. For...of
5. Computed property names
6. Object.assign()
7. Rest parameters
8. Default parameters
9. Destructuring assignment
10. Map
11. Set
12. Classes
13. Promise
14. Iterators
15. Generators
16. Sumbol

Template literals (Template strings)

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

Шаблонные литералы заключены в обратные кавычки (` `) вместо двойных или одинарных. Они могут содержать подстановки, обозначаемые знаком доллара и фигурными скобками (${выражение}). Выражения в подстановках и текст между ними передаются в функцию. По умолчанию функция просто объединяет все части в строку. Если перед строкой есть выражение (здесь это tag), то шаблонная строка называется «теговым шаблоном». В этом случае, теговое выражение (обычно функция) вызывается с обработанным шаблонным литералом, который вы можете изменить перед выводом. Для экранирования обратной кавычки в шаблонных литералах указывается обратный слэш \.