Реализация жизненных циклов React с помощью Reason React Hooks

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

Отображение

map(add) применяет value + 1 ко всему массиву [1, 2, 3, 4, 5, 6, 7].

1. Выражение value + 1 применяется к каждому элементу.
2. map(add) возвращает изменённую копию, оставляя оригинал нетронутым.
3. Результат: [2,3,4,5,6,7,8]. Создана копия массива.

Фильтрация

В анимации ошибка: должно быть [6,7].

1. Выражение value > 5 применяется к каждому элементу.
2. filter(test) возвращает изменённую копию. Оригинал по-прежнему доступен!
3. Результат: [6,7,8]. Соответствует условию test.

Cведение

Типичный пример использования  —  суммирование цен в корзине. Функция reduce уникальна: она использует аккумулятор. Он должен иметь стартовое значение, здесь  —  0.

1. Функция F берёт значение и аккумулятор.
2. В примере reduce(F, 0)возвращает сумму элементов массива, 28.

Итоги

Конечно, эти функции высшего порядка могут и должны решать различные задачи. Они не ограничены числами и могут работать с массивами объектов.