Published
Edited
Jul 2, 2021
Insert cell
md`# Questions checkpoint 3`
Insert cell
md`## 1. What is a critical rendering path?`
Insert cell
md`
Последовательность этих шагов, необходимая для первого отображения страницы, называется «Критический путь рендеринга»

**Существует 6 этапов CRP:**
- построение DOM-дерева,
- построение CSSOM-дерева,
- запуск JavaScript,
- создание Render-дерева,
- генерация раскладки,
- отрисовка.

[link1](https://developers.google.com/web/fundamentals/performance/critical-rendering-path)
[link2](https://habr.com/ru/post/320430/)
`
Insert cell
md`## 2. What is reflow and repaint?`
Insert cell
md`
**Repaint**

В случае изменения стилей элемента, не влияющих на его размеры и положение на странице (например, background-color, border-color, visibility), браузер просто отрисовывает его заново, с учётом нового стиля — происходит repaint (или restyle).

**Reflow**

Если же изменения затрагивают содержимое, структуру документа, положение элементов — происходит reflow (или relayout). Причинами таких изменений обычно являются:

- Манипуляции с DOM (добавление, удаление, изменение, перестановка элементов);
- Изменение содержимого, в т.ч. текста в полях форм;
- Расчёт или изменение CSS-свойств;
- Добавление, удаление таблиц стилей;
- Манипуляции с атрибутом «class»;
- Манипуляции с окном браузера — изменения размеров, прокрутка;
- Активация псевдо-классов (например, :hover).

[link1](https://www.linkedin.com/pulse/reflow-repaint-manipulating-dom-responsibly-anshul-parmar)
[link2](https://habr.com/ru/post/224187/)
`
Insert cell
md`## 3. How to make sure that script is loading asynchronously?`
Insert cell
md`
Не уверен что этого ответа ждут, но можно посмотреть по вкладке network либо performance блокирует ли js что-то

[best link about async and defer](https://flaviocopes.com/javascript-async-defer/)
`
Insert cell
md`## 4. What is a critical css?`
Insert cell
md`
Критический путь рендеринга это шаги, которые делает браузер делает для рендеринга страницы. Нам нужно свести к минимуму количество блокирующего CSS, или критичного CSS, чтобы наша страница быстрее показалась пользователю. Критический ресурс это любой ресурс, который может блокировать первоначальный рендеринг страницы. **Идея состоит в том, чтобы веб-сайт мог вывести первые элементы контента пользователю в первых TCP-пакетах**.
Т.е. нужно вывести те стили, которые задают размер блокам на первой странице видимости.

[link](http://prgssr.ru/development/razbiraemsya-s-kritichnym-css.html#heading-css)
`
Insert cell
md`## 5. What is requestAnimationFrame?`
Insert cell
md`
window.requestAnimationFrame указывает браузеру на то, что вы хотите произвести анимацию, и просит его запланировать перерисовку на следующем кадре анимации. В качестве параметра метод получает функцию, которая будет вызвана перед перерисовкой.

[mdn](https://developer.mozilla.org/ru/docs/Web/API/window/requestAnimationFrame)
`
Insert cell
md`## 6. What is requestIdleCallback?`
Insert cell
md`
requestIdleCallback – это новый API, разработанный для запланированного запуска менее значимых фоновых задач, что позволяет браузеру освободить немного ресурсов. Он чем-то напоминает requestAnimationFrame, который запускал функцию обновления анимации перед следующим изменением цвета.

Поддержку requestIdleCallback можно определить следующим образом:

[link](https://www.internet-technologies.ru/articles/kak-rasplanirovat-fonovye-zadachi-pri-pomoschi-javascript.html)
`
Insert cell
// if ('requestIdleCallback' in window) {
// // requestIdleCallback supported
// requestIdleCallback(backgroundTask);
// }
// else {
// // no support - do something else
// setTimeout(backgroundTask1, 1);
// setTimeout(backgroundTask2, 1);
// setTimeout(backgroundTask3, 1);
// }
Insert cell
md`## 7. Name all ways to create css animation`
Insert cell
md`
1. transition
2. keyframes
3.

Ways to create css animation:

- **animation-name** (Определяет имя @keyframes (en-US), настраивающего кадры анимации)
- **animation-duration** (Определяет время, в течение которого должен пройти один цикл анимации)
- **animation-delay** (Настраивает задержку между временем загрузки элемента и временем начала анимации)
- **animation-iteration-count** (Определяет количество повторений анимации; вы можете использовать значение infinite для бесконечного повторения анимации)
- **animation-direction** (Даёт возможность при каждом повторе анимации идти по альтернативному пути, либо сбросить все значения и повторить анимацию)
- **animation-timing-function** (Настраивает ускорение анимации)
- **animation-fill-mode** (Настраивает значения, используемые анимацией, до и после исполнения)
- **animation-play-state** (Позволяет приостановить и возобновить анимацию)

После того, как вы настроили временные свойства (продолжительность, ускорение) анимации, вы должны определить внешний вид анимации. Это делается с помощью двух и более ключевых кадров после @keyframes (en-US). Каждый кадр описывает, как должен выглядеть анимированный элемент в текущий момент.
`
Insert cell
md`## 8. Name all ways to create animation using JS`
Insert cell
md`

requestAnimationFrame, setTimeout, setInterval

`
Insert cell
md`## 9. Name all the ways you know to optimize site loading performance?`
Insert cell
md`
1. Use a Content Delivery Network (CDN)
2. Move your website to a better host
3. Optimize the size of images on your website
4. Reduce the number of plugins
5. Minimize the number of JavaScript and CSS files
6. Use website caching
7. Implement Gzip Compression
8. Reduce the use of web fonts
9. Detect 404 errors
10. Reduce redirects
11. Use prefetching techniques
`
Insert cell
md`## 10. What is CDN?`
Insert cell
md`
**Основные термины**

Прежде чем начать предметный разговор об особенностях CDN, определимся с основной терминологией.

**CDN (Content Delivery Network)** — это географически распределённая сетевая инфраструктура, обеспечивающая быструю доставку контента пользователям веб-сервисов и сайтов. Входящие в состав CDN cерверы географически располагаются таким образом, чтобы сделать время ответа для пользователей сайта/сервиса минимальным.

**Ориджин (origin)** — сервер, на котором хранятся исходные файлы или данные, раздаваемые через CDN.

**PoP (point of presence, точка присутствия)** — кэширующий сервер в составе CDN, расположенный в определенной географической локации. Для обозначения таких серверов также используется термин edge.

**Динамический контент** ― контент, генерируемый на сервере в момент получения запроса (либо изменяемый пользователем, либо загружаемый из базы данных).

**Статический контент** ― контент, хранимый на сервере в неизменяемом виде (например, бинарные файлы, аудио- и видеофайлы, JS и CSS).

[link](https://habr.com/ru/company/selectel/blog/463915/)
`
Insert cell
md`## 11. Name all HTTP methods you know (at least 5)`
Insert cell
md`
- Метод **GET** запрашивает представление ресурса. Запросы с использованием этого метода могут только извлекать данные.
- **HEAD** запрашивает ресурс так же, как и метод GET, но без тела ответа.
- **POST** используется для отправки сущностей к определённому ресурсу. Часто вызывает изменение состояния или какие-то побочные эффекты на сервере.
- **PUT** заменяет все текущие представления ресурса данными запроса.
- **DELETE** удаляет указанный ресурс.
- **CONNECT** устанавливает "туннель" к серверу, определённому по ресурсу.
- **OPTIONS** используется для описания параметров соединения с ресурсом.
- **TRACE** выполняет вызов возвращаемого тестового сообщения с ресурса.
- **PATCH** используется для частичного изменения ресурса.
`
Insert cell
md`## 12. Name all categories of HTTP statuses`
Insert cell
md`
1. Информационные 100 - 199
2. Успешные 200 - 299
3. Перенаправления 300 - 399
4. Клиентские ошибки 400 - 499
5. Серверные ошибки 500 - 599
`
Insert cell
md`## 13. What is a difference between POST and GET?`
Insert cell
md`
Метод **GET** запрашивает представление ресурса. Запросы с использованием этого метода могут только извлекать данные.

**POST** используется для отправки сущностей к определённому ресурсу. Часто вызывает изменение состояния или какие-то побочные эффекты на сервере.
`
Insert cell
md`## 14. What is a differenst between PUT and PATCH?`
Insert cell
md`
**PUT** заменяет все текущие представления ресурса данными запроса.

**PATCH** используется для частичного изменения ресурса.
`
Insert cell
md`## 15. What is REST?`
Insert cell
md`
Что такое REST

**REST (Representational state transfer)** – это стиль архитектуры программного обеспечения для распределенных систем, таких как World Wide Web, который, как правило, используется для построения веб-служб. Термин REST был введен в 2000 году Роем Филдингом, одним из авторов HTTP-протокола. Системы, поддерживающие REST, называются RESTful-системами.

В общем случае **REST является очень простым интерфейсом управления информацией** без использования каких-то дополнительных внутренних прослоек. Каждая единица информации однозначно определяется глобальным идентификатором, таким как URL. Каждая URL в свою очередь имеет строго заданный формат.
`
Insert cell
md`## 16. What is WebSocket?`
Insert cell
md`
Спецификация WebSocket определяет API для установки соединения между веб-браузером и сервером, основанного на «сокете». Проще говоря, это — постоянное соединение между клиентом и сервером, пользуясь которыми клиент и сервер могут отправлять данные друг другу в любое время.

Клиент устанавливает соединение, выполняя процесс так называемого рукопожатия WebSocket. Этот процесс начинается с того, что клиент отправляет серверу обычный HTTP-запрос. В этот запрос включается заголовок Upgrade, который сообщает серверу о том, что клиент желает установить WebSocket-соединение.

[link](https://habr.com/ru/company/ruvds/blog/342346/)
`
Insert cell
md`## 17. What is a stream?`
Insert cell
md`
**Стрим** – абстрактный интерфейс для работы с поступающими данными в Node.js. Модуль stream предоставляет базовый API, который облегчает создание объектов, что реализуют интерфейс стрима.

Node.js предоставляет много объектов стрима. Например, запрос на HTTP сервер и process.stdout – оба являются экземплярами стрима.

Стримы могут быть открытыми для чтения, открытыми для записи или открытыми для того и другого одновременно. Все стримы являются экземплярами EventEmitter.

[link](https://js-node.ru/site/article?id=41)
`
Insert cell
md`## 18. How to organize multithreading in nodejs?`
Insert cell
md`

Node.js использует два вида потоков:

основной поток, обрабатываемый циклом событий (Event Loop),
несколько вспомогательных потоков в пуле воркеров.
Цикл обработки событий — это механизм, который принимает callback-функции и регистрирует их для выполнения в определённый момент в будущем. Он работает в том же потоке, что и сам код JavaScript. Когда операция блокирует поток, цикл событий также блокируется.

Пул воркеров — модель исполнения, вызывающая и обрабатывающая отдельные потоки. Затем они синхронно выполняют задачу и возвращают результат в цикл обработки событий. После цикл вызывает callback-функцию с указанным результатом.

Если коротко, то пул воркеров может заниматься асинхронными операциями ввода-вывода — прежде всего, взаимодействем с системным диском и сетью.

[link](https://tproger.ru/translations/guide-to-threads-in-node-js/)
`
Insert cell
md`## 19. What is pm2?`
Insert cell
md`
PM2 — это менеджер процессов с открытым исходным кодом, распространяющийся под лицензией AGPL-3.0. В момент написания статьи имеет ~350k загрузок в неделю, согласно данным NPM. В основном применяется в средах, где необходимо запустить приложение на NodeJS и забыть о нём (с остальными языками тоже можно использовать, но об этом позднее), позволяющий кластеризировать приложение и гибко распределять нагрузку между ядрами процессора.

---
Для обеспечения непрерывной работоспособности Node.js сервера нужно либо постоянно держать открытой консоль, либо использовать менеджер процессов pm2. Он имеет встроенный балансировщик нагрузки, позволяет следить за потребляемыми ресурсами запущенных процессов, автоматически перезапускать процессы после системного сбоя и т. д.

[link](https://habr.com/ru/post/480670/)
`
Insert cell
md`## 20. What is nodemon?`
Insert cell
md`
В Node.js для вступления изменений в силу необходимо перезапустить процесс. Это добавляет в рабочий процесс дополнительный шаг, необходимый для внесения изменений. Вы можете устранить этот дополнительный шаг, используя nodemon для автоматического перезапуска процесса.

**Nodemon — это утилита командной строки, разработанная @rem.** Она заключает в оболочку ваше приложение Node, наблюдает за файловой системой и автоматически перезапускает процесс.
`
Insert cell
md`## 21. What is eventemmiter?`
Insert cell
md`
**«EventEmitter» представляет собой основной объект реализующий работу с событиями в Node.JS**. Большое количество других встроенных объектов, которые генерируют события в Node.JS, от него наследуются. Для того, чтобы воспользоваться «EventEmitter», достаточно подключить ‘events’, встроенный и взять у него соответствующее свойство.

[link](https://soshace.com/ru/lessons-node-js-events-eventemitter/)
`
Insert cell
md`## 22. What is a difference between HTTP/HTTP2?`
Insert cell
md`
**HTTP/1.1 без конвейерной обработки:** на каждый запрос HTTP по соединению TCP необходимо ответить до того, как можно будет сделать следующий запрос.

**HTTP/1.1 с конвейерной обработкой:** Каждый запрос HTTP по соединению TCP может быть выполнен немедленно, не дожидаясь ответа предыдущего запроса. Ответы будут возвращаться в том же порядке.

**мультиплексирование HTTP/2:** Каждый запрос HTTP по соединению TCP может быть выполнен немедленно, не дожидаясь возвращения предыдущего ответа. Ответы могут возвращаться в любом порядке.

[link](https://www.8host.com/blog/v-chem-raznica-mezhdu-http1-1-i-http2/)
`
Insert cell
md`## 23. What are the ways to center a div?`
Insert cell
md`
display: flex;
justify-content: center;

margin: 0 auto;

position: absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);

grid => item =>
align-self: center;
justify-self: center;
`
Insert cell
md`## 24. What are the ways to create 2column markup?`
Insert cell
md`
float, flex, grid, table
`
Insert cell
md`## 25. What is a difference between inline and block element?`
Insert cell
md`

**Строчные:**

* Простирается вместе с текстовым контентом
* Не будет очищать предыдущий контент для того, чтобы перейти на следующую строку (как блочные элементы)
* Подвержен параметру white-space в CSS
* Игнорирует параметры верхнего и нижнего поля (margin), но принимает поля по левой и правой сторонам, а также отступы (padding)
* Игнорирует значения высоты и ширины
* Если выравнен по левому или правому краю, автоматически станет блочным элементом, обладающим всеми характеристиками блочных элементов
* Подвержен параметру vertical-align

**Блочные:**

* Без указанного значения ширины он естественным образом растягивается на весь родительский контейнер
* Может быть оформлен полями (margin) или отступами (padding)
* Без указанного значения высоты он естественным образом растягивается до размера, нужного для размещения внутри него дочерних элементов (предположим, что они не выравнены по какому-либо краю или у них не указано позиционирование)
* По умолчанию данный элемент будет расположен ниже предыдущего в разметке элемента (предположим, что окружающие элементы не выравнены по какому-либо краю или у них не указано позиционирование)
* Игнорирует параметр vertical-align

Блочные элементы предназначены для структурирования основных частей вашей страницы, путём разделения содержимого на логически связанные блоки.

Строчные элементы предназначены, чтобы разграничить часть текста и придать ему определённую функцию или смысл. Строчные элементы, как правило, содержат одно или несколько слов.

[link](https://www.educba.com/inline-vs-block/)
`
Insert cell
md`## 26. What is a block model?`
Insert cell
md`
Основная особенность блочных элементов — они занимают всю доступную им ширину. Из-за этого другие элементы до и после блочных элементов не встают в один ряд с ними, а располагаются до или после них, но уже на другой строке.

В соответствии с концепцией блочной модели, каждый элемент на странице представляет собой прямоугольный блок и может иметь ширину, высоту, поля, границы и отступы.
`
Insert cell
md`## 27. What are the major features of React?`
Insert cell
md`
1. Virtual DOM
2. JSX
3. One-way data binding
4. React native
5. Declarative UI
6. Component-based architecture

[link1](https://habr.com/ru/company/ruvds/blog/343022/)
[link](https://www.thirdrocktechkno.com/blog/why-choose-reactjs-for-your-next-project-features-and-benefits/)
`
Insert cell
md`## 28. What is JSX?`
Insert cell
md`
JSX — синтаксический сахар для функции React.createElement(component, props, ...children).

React исходит из принципа, что логика рендеринга неразрывно связана с прочей логикой UI: с тем, как обрабатываются события, как состояние изменяется во времени и как данные готовятся к отображению.

Вместо того, чтобы искусственно разделить технологии, помещая разметку и логику в разные файлы, React разделяет ответственность с помощью слабо связанных единиц, называемых «компоненты», которые содержат и разметку, и логику. Мы ещё вернёмся к теме компонентов в следующей главе, но если идея держать разметку в JavaScript коде всё ещё вызывает у вас дискомфорт, этот доклад может переубедить вас.

[link](https://ru.reactjs.org/docs/introducing-jsx.html)
`
Insert cell
md`## 29. What are Pure Components?`
Insert cell
md`
Если стейт и пропсы остались такие же то не будет апдейта. В обчных компонентах будет апдейт.

Разница между Component и PureComponent заключается в методе updating lifecycle: shouldComponentUpdate.
В Component этот метод выглядит так: return true;

В PureComponent: return !shallowEqual(nextProps, this.props) || !shallowEqual(nextState, this.state);

PureComponent изначально определяет функцию, которая ответствена за принятие решения — нужно ли продолжать updating lifecycle или нет.

[link](https://medium.com/frontend-notes/purecomponent-%D0%B8-components-5c15cf206ba7)
`
Insert cell
md`## 30. What is state in React?`
Insert cell
md`
Компоненты, основанные на классах, могут хранить информацию о текущей ситуации. Эта информация называется состоянием (state), она хранится в JS-объекте.

constructor(props) {
super(props);
this.state = { isMusicPlaying: false };
}
`
Insert cell
md`## 31. What are props in React?`
Insert cell
md`
Компоненты могут «общаться» друг с другом. Посмотрим, как это работает. Мы можем сообщить PlayButton, проигрывается музыка или нет, используя так называемые свойства (props). Свойства — это информация, коллективно используемая родительским компонентом и компонентами-потомками.
`
Insert cell
md`## 32. What is prop drilling?`
Insert cell
md`
Вкратце передача пропсов от родительского компонента вниз по цепочке детей до целевого.

[link](https://medium.com/swlh/avoid-prop-drilling-with-react-context-a00392ee3d8)
`
Insert cell
md`## 33. Why should we not update the state directly?`
Insert cell
md`
Конструктор — это единственное место, где вы можете присвоить значение this.state напрямую.

Поскольку this.props и this.state могут обновляться асинхронно, вы не должны полагаться на их текущее значение для вычисления следующего состояния.

[link](https://ru.reactjs.org/docs/state-and-lifecycle.html)
`
Insert cell
md`## 34. What is the purpose of callback function as an argument of setState()?`
Insert cell
md`
Метод setState() не всегда обновляет компонент сразу. Он может группировать или откладывать обновление до следующего раза. Это делает чтение this.state сразу после вызова setState() потенциальной ловушкой. Вместо этого используйте componentDidUpdate() или колбэк setState() (setState(updater, callback)), каждый из которых гарантированно вызывается после того как было применено обновление. Если вам нужно обновить состояние на основе предыдущего, используйте аргумент updater, описанный ниже.

[link](https://ru.reactjs.org/docs/react-component.html)
`
Insert cell
md`## 35. How does state in a class component differ from state in a functional component?`
Insert cell
md`
Классовый стейт сливается а функциональный полностью затирается

[link](https://habr.com/ru/company/ruvds/blog/444348/)
`
Insert cell
md`## 36. What is Virtual DOM?`
Insert cell
md`
Виртуальный DOM (VDOM) — это концепция программирования, в которой идеальное или «виртуальное» представление пользовательского интерфейса хранится в памяти и синхронизируется с «настоящим» DOM при помощи библиотеки, такой как ReactDOM. Этот процесс называется согласованием.

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

[link](https://ru.reactjs.org/docs/faq-internals.html)
`
Insert cell
md`## 37. What are controlled components?`
Insert cell
md`
Управляемый компонент принимает свое текущее значение в качестве пропсов, а также коллбэк для изменения этого значения. Вы можете сказать, что это более “реактивный” способ управления компонентом, однако это не означает, что вы всегда должны использовать этот метод.
`
Insert cell
md`## 38. What are uncontrolled components?`
Insert cell
md`
Неуправляемые компоненты похожи на обычные HTML-формы.
Неуправляемые компоненты хранят данные формы прямо в DOM.
`
Insert cell
md`## 39. What are the lifecycle methods of React?`
Insert cell
md`
componentDidMount
shouldComponentUpdate
componentDidUpdate
`
Insert cell
md`## 40. How do you update lifecycle in functional components?`
Insert cell
md`
useEffect
`
Insert cell
md`## 41. What are stateless/stateful components?`
Insert cell
md`
stateless нет стейта (фанкшн компонент)
stateful есть стейт
`
Insert cell
md`## 42. What arguments does useEffect take?`
Insert cell
md`
колбек что нужно выполнить после рендера и массив зависимостей с чем нужно сравнить чтоб принять решение о ререндере
`
Insert cell
md`## 43. What is the useEffect function's return value?`
Insert cell
md`
useEffect(() => (), []) - componentDidMount

useEffect(() => (), [state]) - componentDidUpdate

useEffect(() => {
return val;
}) - componentDidUnmount
`
Insert cell
md`## 44. What is Flux?`
Insert cell
md`
Итак, React отвечает за V или View в MVC. А как насчет M или Model части? Flux, шаблон проектирования, соответствует M в MVC.
Это архитектура, ответственная за создание слоя данных в JavaScript приложениях и разработку серверной стороны в веб-приложениях. Flux дополняет составные компоненты вида View в React, используя однонаправленный поток данных.

Также можно сказать, что Flux больше чем шаблон, больше чем фреймворк и имеет 4 главных компонента (более подробно они будут рассмотрены позже):
- Диспетчер (Dispatcher)
- Хранилище (Stores)
- Представления (Views) (React компонент)
- Действие (Action)
`
Insert cell
md`## 45. What is Redux?`
Insert cell
md`
Что такое Redux ? Это менеджер состояний. Чаще всего его используют с React, но его возможности не ограничиваются одной этой библиотекой. Хотя в React есть собственный метод управления состояниями (почитать о нём можно в руководстве по React), он плохо масштабируется.

Библиотека Redux — это способ управления состоянием приложения. Она основана на нескольких концепциях, изучив которые, можно с лёгкостью решать проблемы с состоянием. Вы узнаете о них далее, в этом руководстве по Redux для начинающих.

Действие (action) — это JavaScript-объект, который лаконично описывает суть изменения:
{
type: 'CLICKED_SIDEBAR'
}

Генераторы действий (actions creators) — это функции, создающие действия.
function addItem(t) {
return {
type: ADD_ITEM,
title: t
}
}

Редуктор (reducer) — это чистая функция, которая вычисляет следующее состояние дерева на основании его предыдущего состояния и применяемого действия.

Хранилище (store) — это объект, который:

- содержит состояние приложения;
- отображает состояние через getState();
- может обновлять состояние через dispatch();
- позволяет регистрироваться (или удаляться) в качестве слушателя изменения состояния через subscribe().
- Хранилище в приложении всегда уникально.
`
Insert cell
md`## 46. What are the core principles of Redux?`
Insert cell
md`
Single source of truth - Единственный источник правды

State is read-only - Состояние только для чтения

Changes are made with pure functions - Мутации написаны, как чистые функции
`
Insert cell
md`## 47. What is an action in Redux?`
Insert cell
md`
Экшены — это структуры, которые передают данные из вашего приложения в стор. Они являются единственными источниками информации для стора. Вы отправляете их в стор, используя метод store.dispatch()

Экшены — это обычные JavaScript-объекты. Экшены должны иметь поле type, которое указывает на тип исполняемого экшена. Типы должны быть, как правило, заданы, как строковые константы.

[link](https://rajdee.gitbooks.io/redux-in-russian/content/docs/basics/Actions.html)
`
Insert cell
md`## 48. What is mapStateToProps()?`
Insert cell
md`
Аргумент mapStateToProps является функцией, которая возвращает либо обычный объект, либо другую функцию. Передача этого аргумента connect() приводит к подписке компонента-контейнера на обновления хранилища Redux. Это означает, что функция mapStateToProps будет вызываться каждый раз, когда состояние хранилища изменяется. Если вам слежение за обновлениями состояния не интересно, передайте connect() в качестве значения этого аргумента undefined или null.

Функция mapStateToProps объявляется с двумя параметрами, второй из которых является необязательным. Первый параметр представляет собой текущее состояние хранилища Redux. Второй параметр, если его передают, представляет собой объект свойств
`
Insert cell
md`## 49. What is mapDispatchToProps()?`
Insert cell
md`
Аргумент mapDispatchToProps может быть либо объектом, либо функцией, которая возвращает либо обычный объект, либо другую функцию.

mapStateToProps -это функция, которую вы будете использовать для предоставления данных хранилища вашему компоненту, в то время как mapDispatchToProps -это то, что вы будете использовать для предоставления создателей действий в качестве реквизитов для вашего компонента.
`
Insert cell
md`## 50. How to use connect from React Redux?`
Insert cell
md`
connect()(Comment)

connect(null, mapDispatchToProps)(Comment)

connect(mapStateToProps, mapDispatchToProps)(Counter)
`
Insert cell
md`## 51. What are the different ways to write mapDispatchToProps()?`
Insert cell
md`
вы определяете mapDispatchToProps как object

const mapDispatchToProps = {
getAddress
};

либо возвращаете отправленную функцию из mapDispatchToProps

const mapDispatchToProps = dispatch => ({
getAddress: (...args) => dispatch(getAddress(...args));
});
`
Insert cell
md`## 52. What is Redux Thunk?`
Insert cell
md`
Thunk или преобразователь — это концепция программирования, в которой функция используется для отсрочки оценки или расчета операции.

Redux Thunk — это промежуточное ПО, позволяющее вызывать создателей действий, которые возвращают функцию вместо объекта действия. Эта функция получает метод обработки Stora, который затем используется для обработки регулярных синхронных действий внутри тела функции после выполнения асинхронных операций.
`
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more