JAVASCRIPT REACT, СТРУКТУРА ДАННЫХ И ОБЗОР АЛГОРИТМОВ.

РЕАКТ ЯВЛЯЕТСЯ РАМОЧКОЙ ИЛИ БИБЛИОТЕКОЙ JAVASCRIPT?

React - это библиотека javaScript, это не то же самое, что framework. Framework предоставляет комплексное решение, где библиотека React не является полным решением, и вам понадобятся другие библиотеки, чтобы разобраться в любом решении. Вот почему мы можем назвать React библиотекой, но не фреймворком.

РЕАКТИРОВАТЬ ДОМ

Объектная модель документа - это программный интерфейс браузеров, который обрабатывает документы HTML и XML как древовидные структуры. Используя DOM API, мы можем изменить структуру, стиль и содержимое документа.

ПРИМИРЕНИЕ

Это процесс рекурсивного обхода дерева для определения элементов тега DOM в дереве компонентов приложения React. Во время этого процесса React выполняет следующие шаги:

• Сравнивает предыдущий внутренний экземпляр со следующим внутренним экземпляром.
• Обновляет внутренний экземпляр (виртуальный DOM).
• Обновляет фактическую модель DOM только на том узле, где произошло фактическое изменение.

КОМПОНЕНТЫ VS ЭЛЕМЕНТЫ

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

Элемент реакции - это то, что он получает от компонентов. Это объект, виртуально описывающий узлы DOM, которые представляет компонент. В функциональном компоненте этот элемент является объектом, который возвращает функция, а в компонентах класса этот элемент является объектом, возвращаемым методом рендеринга компонента.

КОМПОНЕНТЫ REACT

Компоненты - одна из важнейших функций приложения React. Это независимые и повторно используемые фрагменты кода. По сути, они похожи на функции с другим синтаксисом. Они принимают реквизиты в качестве входных данных и возвращают описание пользовательского интерфейса в качестве выходных данных. В React есть два типа компонентов.

Компоненты класса

Функциональные компоненты

РЕАКТИРОВАТЬ ФРАГМЕНТ

Обычно в React компонент возвращает несколько элементов. Фрагменты позволяют группировать список дочерних элементов без добавления дополнительных узлов в DOM.

Существует также короткий и простой синтаксис для их объявления. Похоже, теги пустые.

РЕАГИРОВАТЬ ПОД КАПОТОМ

React - это библиотека JavaScript, используемая для создания пользовательских интерфейсов. Приложение React поддерживает несколько инструментов.

1. Babel: это транспилятор JavaScript, используемый для преобразования кода из одного синтаксиса в другой. Это важно для React, поскольку он используется для преобразования JSX в простой код JS.
2. JSX: это расширение JavaScript, которое позволяет нам писать вызовы функций в синтаксисе, подобном HTML.
3. Node.js: это среда выполнения JavaScript, построенная на движке JavaScript V8 Chrome. Это позволяет нам выполнять JS вне браузера.
4. NPM: это программный регистр, используемый в качестве диспетчера пакетов для языка программирования JavaScript.

Вавилон

Bable - это компилятор javascript, он компилирует код javascript ES2015 + в код javascript старой версии для нового или старого браузера и совместимого с окружением. Babel может сделать для вас:
синтаксис преобразования;
функции полифила, которые отсутствуют в вашей целевой среде;
преобразования исходного кода.

PROPS IN JSX

В React «props» - это специальное ключевое слово, обозначающее свойства и используемое для передачи данных между компонентами. Существует несколько способов определения свойств в JSX.
Выражения JavaScript
Строковые литералы
Для свойств по умолчанию установлено значение «Истина»
Атрибуты распространения

ЗАЧЕМ НУЖЕН JSX?

JSX позволяет нам писать элементы HTML в JavaScript и размещать их в DOM без каких-либо методов createElement () и appendChild (). JSX преобразует HTML-теги в элементы реакции. Вам не обязательно использовать JSX, но JSX упрощает написание приложений React.
React использует JSX для создания шаблонов вместо обычного JavaScript. Тем не менее, использовать его не обязательно. Вот некоторые преимущества, которые у него есть:
Он быстрее, потому что выполняет оптимизацию при компиляции кода в JavaScript.
Он также безопасен по типу и большинство ошибки могут быть обнаружены во время компиляции.
Это упрощает и ускоряет написание шаблонов, если вы знакомы с HTML.

СПОСОБЫ УСТРАНЕНИЯ ОШИБОК

В React есть в основном два типа методов обработки ошибок. Эти методы используются в механизме границы ошибки.
static getDerivedStateFromError (error)
Этот метод полезен для отрисовки резервного пользовательского интерфейса после возникновения ошибки.
componentDidCatch (error, info)
Это полезно для регистрации информации об ошибках в целях отладки.

ЧТО ТАКОЕ РЕАКТИВНЫЙ МЕТОД ЖИЗНИ?

Методы жизненного цикла React - это серия событий, которые происходят от рождения компонента React до его смерти. Каждый компонент в React проходит жизненный цикл событий. Мне нравится думать о них как о переживающих цикл рождения, роста и смерти. Методы жизненного цикла выполняются на этапе начальной или повторной визуализации.
Пример:
componentDidMount (), shouldComponentUpdate (), componentDidUpdate () и т. Д.

ПОЧЕМУ НЕОБХОДИМО ТЕСТИРОВАНИЕ АГРЕГАТА?

Модульное тестирование помогает убедиться, что код работает правильно. Модульные тесты - отличный способ провести регрессионное тестирование: просто запускайте их каждый раз, когда вы что-то меняете, и убедитесь, что ничего не сломалось. Заметили ошибку? Исправьте это и напишите модульный тест, чтобы убедиться, что это больше не повторится.
Для определенных вами важных частей кода вам необходимо написать модульные тесты, чтобы убедиться, что код работает.

ПОЧЕМУ НЕ ИСПОЛЬЗОВАТЬ TRY / CATCH?

try / catch отлично, но работает только для императивного кода:
try {
showButton ();
} catch (error) {
//…
}
Однако компоненты React декларативны и указывают, что должно отображаться:
‹Button /›
Границы ошибок сохраняют декларативный характер React и ведут себя так, как вы ожидаете. Например, даже если в методе componentDidUpdate возникает ошибка, вызванная setState где-то глубоко в дереве, она все равно будет правильно распространяться до ближайшей границы ошибки.

РЕАКТИВНЫЕ КРЮЧКИ

Перехватчик React - это способ использования состояния и побочных эффектов в компонентах функции реакции. Таким образом, этот хук позволяет нам легко манипулировать состоянием нашего функционального компонента без необходимости преобразовывать их в компонент класса. Хуки - это новое дополнение в версии 16.8.

ПРАВИЛА РЕАКТИВНЫХ КРЮЧКОВ

Нам нужно понять правила реакции, прежде чем углубляться в фундаментальные концепции.

• Вызывайте ловушки только на верхнем уровне. Не вызывайте хуки внутри циклов, условий или вложенных функций.
• Вызывайте хуки только из компонентов функции React. Не вызывайте хуки из обычных функций JavaScript. (Есть еще одно допустимое место для вызова хуков - ваши собственные хуки. Мы узнаем о них чуть позже.)

REACT HOOK (ОПТИМИЗАЦИЯ ДЛЯ ПРОИЗВОДИТЕЛЬНОСТИ)

Каждый разработчик всегда пытается оптимизировать свое приложение, чтобы оно могло работать хорошо. Итак, есть несколько методов повышения производительности, например:

• Ненужная повторная отрисовка
• Многократные тяжелые вычислительные вычисления в компонентах
• И многое другое

ПОЧЕМУ РЕАКТИРУЮТ КРЮЧКИ?

Перехватчики React были изобретены командой React для внедрения управления состоянием и побочных эффектов в функциональном компоненте. Преимущества перехватчиков React:

• Рефакторинг ненужных компонентов
• Логика побочного эффекта
• Ад абстракций React
• Уменьшение путаницы в классах JavaScript
• Снижение потребности в реквизитах для рендеринга

ИСПОЛЬЗОВАТЬ ОБРАТНЫЙ ЗВОНОК ()

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

USESTATE ()

В React Hooks useState () позволяет нам иметь переменные состояния в функциональных компонентах. Он принимает в качестве аргумента начальное значение состояния и возвращает массив из двух элементов. Первый элемент - это текущее состояние, а второй элемент - функция, обновляющая текущее состояние.

Мы также можем сделать клон useState (), используя замыкания, чтобы понять, как это работает на самом деле.

ИСПОЛЬЗОВАТЬ ()

Хук useEffect () позволяет нам выполнять побочные эффекты в функциональных компонентах. Он принимает функцию обратного вызова в качестве первого аргумента и массив зависимостей в качестве второго аргумента. Он выполняет функцию обратного вызова при изменении каких-либо значений зависимости.

КРЮЧКИ НА ЗАКАЗ

Хуки - это не что иное, как функции JavaScript с некоторыми дополнительными правилами. Любая функция JS, имя которой начинается с «use» и которая может вызывать другие хуки, называются пользовательскими хуками. Они полезны для повторного использования логики с отслеживанием состояния между компонентами без повторения одного и того же кода или добавления дополнительных компонентов в дерево.

КОМПОНЕНТЫ ВЫСШЕГО ЗАКАЗА

Компонент высшего порядка (HOC) - это продвинутая технология React для повторного использования логики компонентов. HOC часто встречается в сторонних библиотеках React. HOC - это функция, которая принимает компонент и возвращает новый компонент. HOC не являются частью React API. Это шаблон, который вытекает из композиционной природы React.
const EnhancedComponent = upperOrderComponent (WrappedComponent)

РЕФОРМЫ И ПОЛЬЗОВАТЕЛИ

Ссылки - это специальный атрибут, который доступен во всех компонентах React. Они позволяют нам создавать ссылку на данный элемент / компонент при монтировании компонента
useRef позволяет нам легко использовать React refs. Мы вызываем useRef (вверху компонента) и прикрепляем возвращаемое значение к атрибуту ref элемента, чтобы ссылаться на него.
После создания ссылки мы используем текущее свойство для изменения (мутации) свойств элемента. Или мы можем вызвать любые доступные методы для этого элемента (например, .focus () для фокусировки ввода).

ПОЧЕМУ ДОСТУПНОСТЬ ВЕБ?

Веб-доступность как функция была замечена как очень неправильный способ дизайнерского мышления, потому что по умолчанию она исключает большое количество веб-пользователей. Например, люди, которые не видят или по какой-то причине не могут использовать трекпад или указатель мыши, должны иметь столько же прав и доступа, сколько и люди, которые могут. Доступность веб-сайтов также приносит пользу людям без инвалидности, к таким людям могут относиться:
Люди, использующие мобильные устройства телефоны, смарт-часы, смарт-телевизоры и другие устройства с маленькими экранами, разными режимами экрана и т. д.
Пожилые люди с измененными способностями в связи со старением.
Люди с «временной инвалидностью», например, сломанной или потерянной рукой очки.
Людям с ограниченными физическими возможностями, например, при ярком солнечном свете или в среде, где нельзя слушать аудио.
Людям, использующим медленное подключение к Интернету, у которых ограниченная или дорогая пропускная способность.

НЕ ИСПОЛЬЗУЙТЕ HOCS ВНУТРИ МЕТОДА РЕНДЕРА

Алгоритм сравнения React, который называется согласованием, использует идентичность компонента, чтобы определить, следует ли обновлять существующее поддерево или монтировать новое.
Если компонент, возвращенный из рендеринга, идентичен (===) компоненту из в предыдущем рендере React рекурсивно обновляет поддерево,
заменяя его новым. Если они не равны, предыдущее поддерево полностью размонтируется.
Мы также можем сделать это внутри методов жизненного цикла компонента или его конструктора.

ЧТО ТАКОЕ СТРУКТУРЫ ДАННЫХ?

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

Структуры данных позволяют нам:

• Управляйте большими наборами данных и используйте их
• Поиск определенных данных в базе данных
• Разработка алгоритмов, адаптированных к конкретным программам
• Одновременная обработка нескольких запросов от пользователей
• Упростите и ускорьте обработку данных

Структуры данных жизненно важны для эффективного решения реальных проблем. В конце концов, способ организации данных сильно влияет на производительность и удобство использования. Фактически, большинству ведущих компаний требуется глубокое понимание структур данных. Эти навыки демонстрируют, что вы знаете, как эффективно управлять своими данными. Любой, кто хочет пройти собеседование по кодированию, должен будет освоить структуры данных.

СТРУКТУРЫ ДАННЫХ JAVASCRIPT

ДВОИЧНОЕ ДЕРЕВО ПОИСКА:

Когда мы думаем о двоичном дереве поиска, мы должны думать о трех вещах:

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

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

Базовый класс дерева будет выглядеть так:

Мы также создадим класс Node для представления каждого из наших узлов.

Давайте реализуем метод add. Я очень хорошо прокомментировал код, но если вы сочтете его запутанным, просто помните, что все, что мы делаем, из нашего корня и чеконга слева и справа от каждого узла.

Давайте протестируем наш новый метод добавления следующим образом:

КУЧА

Это очень похоже на очередь, и вы, возможно, слышали раньше о стеке вызовов, который JavaScript использует для обработки событий.

когда у вас есть стек, последний элемент, который вы поместили в стек, будет удален первым. Это называется «последним пришел - первым ушел» (LIFO). Хорошим примером является кнопка "Назад" в веб-браузерах: каждая просматриваемая страница добавляется в стек, и когда вы нажимаете кнопку "Назад", текущая страница (последняя добавленная) выталкивается из стека.

Достаточно теории. Давайте перейдем к коду

Я прокомментировал приведенный выше код, поэтому надеюсь, что вы со мной до этого момента. Первый метод, который мы реализуем, - это метод push.

Давайте подумаем, для чего нам нужен этот метод:

• Нам нужно принять значение
• Затем нам нужно добавить это значение в верхнюю часть нашего стека
• Мы также должны отслеживать длину нашего стека, чтобы знать индекс нашего стека

Было бы здорово, если бы вы могли сначала попробовать это сами, но если нет, полная реализация метода push приведена ниже:

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

Теперь перейдем к методу pop. Цель метода pop - удалить последнее значение, которое было добавлено в наш стек, а затем вернуть это значение. Попробуйте сначала сами, если можете, в противном случае просто продолжайте поиски решения:

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

ОЧЕРЕДЬ

Ключевое различие между стеком и очередью состоит в том, что очередь работает в порядке очереди (FIFO). К этой статье было несколько комментариев с вопросом, почему бы не использовать здесь массив, поэтому, в отличие от приведенного выше, мы будем использовать массив для этой структуры данных.

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

Основная структура нашего кода будет выглядеть следующим образом:

давайте сначала реализуем наш метод постановки в очередь. Его цель - добавить элемент в конец нашей очереди.

Это довольно простой метод, который добавляет значение в конец нашей очереди, но вас может немного смутить

this.queue[this.length + this.head] = value;

Допустим, наша очередь выглядела так{14 : 'randomVal'}. При добавлении к этому мы хотим, чтобы нашим следующим ключом был 15, поэтому он будет иметь вид length (1) + head (14), что дает нам 15.

Следующий метод, который нужно реализовать, - это метод удаления из очереди:

Последний метод, который нужно реализовать, - это простой метод просмотра:

СВЯЗАННЫЙ СПИСОК

Это сложнее, чем наши структуры выше, но вместе мы сможем это выяснить.

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

Первое, что мы собираемся создать, - это класс Node.

Выше представлен каждый узел в нашем списке.

С классом для нашего узла следующим классом, который нам понадобится, будет наш LinkedList.

Итак, как мы объяснили выше, наш LinkedList в качестве заголовка, который сначала имеет значение null (вы можете добавить аргумент в свой конструктор, чтобы установить это, если хотите). Мы также отслеживаем размер связанного списка.

Первый метод, который мы собираемся реализовать, - это вставить; это добавит узел в наш связанный список

Я прокомментировал приведенный выше код, чтобы его было легче понять, но все, что мы делаем, - это добавляем узел в конец связанного списка. Мы можем найти конец связанного списка, найдя узел со следующим значением null.

Следующий метод, который мы собираемся реализовать, - это removeAt. Этот метод удалит узел по индексу.

Таким образом, описанный выше метод удалит узел по определенному индексу. Он делает это, обновляя следующее значение, чтобы оно указывало на следующий узел в списке, пока мы не дойдем до индекса. Это означает, что ни один узел не будет указывать на узел по индексу, поэтому он будет удален из нашего списка.

Последний (самый простой) метод - это clearList.

ХЕШ-ТАБЛИЦА

Хеш-таблица - это структура данных, которая реализует ассоциативный массив, что означает, что она сопоставляет ключи со значениями. Объект JavaScript представляет собой хеш-таблицу, так как в ней хранятся пары ключ-значение.

Рассмотрев хеш-функцию, пора поговорить о том, как реализовать хеш-таблицу.
Мы обсудим три операции: вставка, получение и, наконец, удаление.

Основной код для реализации хеш-таблицы выглядит следующим образом:

Давайте займемся нашим первым методом - вставкой. Код для вставки в хеш-таблицу выглядит следующим образом.

Итак, если бы мы вызывали метод вставки следующим образом:

Теперь, как нам удалить из хеш-таблицы?

Последний метод, который мы реализуем, - это метод get. Это то же самое, что и метод удаления, но на этот раз мы возвращаем пару, а не удаляем ее.

АЛГОРИТМЫ В JAVASCRIPT

ФАКТОРИАЛ

Факториал неотрицательного целого числа n, обозначаемого n !, является произведением всех положительных целых чисел, меньших или равных n. Например,

4! = 4 * 3 * 2 * 1 = 24

Например:

ФАКТОРНЫЙ РЕКУРСИВНЫЙ

Факториал числа можно найти с помощью рекурсии. Если вам сложно понять рекурсивную функцию, попробуйте подумать о стеке. Когда выполняется вызов функции, вызов функции помещается в стек, а затем вызовы других функций размещаются один над другим. Попробуйте нарисовать стек вызовов в записной книжке, тогда, возможно, это будет легче понять.

Например:

СЕРИЯ ФИБОНАЧЧИ

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

[1, 1, 2, 3, 5, 8, 13, 21, 34, 55]

Например:

ЛИНЕЙНЫЙ ПОИСК

В информатике линейный поиск или последовательный поиск - это метод поиска целевого значения в списке. Он последовательно проверяет каждый элемент списка на предмет целевого значения, пока не будет найдено совпадение или пока не будут найдены все элементы. Линейный поиск выполняется в худшем случае за линейное время и производит не более n сравнений, где n - длина списка.

Например:

БИНАРНЫЙ ПОИСК

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

Например:

Пузырьковая сортировка

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

Например:

ВЫБОР СОРТИРОВКИ

Выборочная сортировка - это алгоритм сортировки, в частности сортировка на месте сравнения. Он имеет временную сложность O (n2), что делает его неэффективным для больших списков и, как правило, работает хуже, чем аналогичная сортировка вставкой. Сортировка по выбору отличается своей простотой и имеет преимущество в производительности по сравнению с более сложными алгоритмами в определенных ситуациях, особенно когда вспомогательная память ограничена.

Например:

ВСТАВКА СОРТИРОВКА

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

Например: