Седьмой день обучения React — завершение этапа 2!
Добро пожаловать на путь изучения React и JavaScript. Это краткое изложение того, что мы узнали о React (одной из самых популярных интерфейсных библиотек JS), базовых структурах данных, алгоритмах JavaScript за последние шесть дней подряд. Мы кратко рассмотрели здесь некоторые важные и основные темы React, такие как как React работает за кулисами, Virtual DOM, JSX, State, Props, Hooks, модульное тестирование, обработка ошибок, веб-доступность, React High-Order Components ( HOC), методы жизненного цикла компонентов React и некоторые базовые структуры данных и алгоритмы JavaScript.
1. Реагируйте за кулисами:
Интересно, что React работает уникальным образом за кулисами. Есть несколько механизмов, которым React следует для компиляции пользовательского интерфейса внутри браузера. Мы кратко опишем их один за другим:
JSX
Синтаксис, который не является ни HTML, ни JavaScript, но является общим языком для обоих. Используя JSX, мы можем поместить HTML в код JavaScript и наоборот.
Вавилон
Преобразует (переводит + компилирует) код ES6 в код ES5 для поддержки новейших функций языка для большинства браузеров. Он также преобразует синтаксис JSX в код JavaScript.
Веб-пакет
Сборщик модулей JavaScript с открытым исходным кодом, который объединяет множество файлов в несколько файлов.
узел
Среда выполнения для JavaScript, которая позволяет нам запускать код JavaScript вне браузера.
нпм
Менеджер пакетов для узловых приложений.
2. Виртуальный дом
Виртуальный DOM — это объект React, который является виртуальной версией фактического DOM браузера. React всегда создает виртуальную версию DOM всякий раз, когда обнаруживает изменение пользовательского интерфейса.
Помните,
Виртуальный DOM → React Object
Browser DOM (DOM) → Browser Object
Всякий раз, когда в приложении происходят изменения, React создает новый виртуальный DOM. Виртуальный DOM работает слишком быстро, чем фактический DOM браузера. Он может создавать 200 000 узлов Virtual DOM в течение одной секунды. Каждый раз, когда в пользовательском интерфейсе обнаруживается изменение, React создает виртуальный DOM с нуля.
3. Почему React назван React?
React называется React из-за своей природы реакциина пользовательский интерфейс (UI) по отношению к изменение компонента
Facebook назвал эту библиотеку JavaScript React, потому что всякий раз, когда изменяется состояние компонента, пользовательский интерфейс, представленный пользователю, получает его мгновенную копию.
4. defaultProps
Это свойство самого класса компонента, чтобы установить реквизиты по умолчанию для класса. Это используется для неопределенных реквизитов, но не для нулевых реквизитов.
Пример:
Если props.color не указан, по умолчанию для него будет установлено значение ‘синий’:
Если для props.color установлено значение null, оно останется null:
5. Границы ошибки
Границы ошибок — это компоненты React, которые отлавливают ошибки JavaScript в любом месте своего дочернего дерева компонентов, регистрируют эти ошибки и отображают резервный пользовательский интерфейс вместо дерева компонентов, в котором произошел сбой. Границы ошибок перехватывают ошибки во время рендеринга, в методах жизненного цикла и в конструкторах всего дерева под ними.
Пример:
Мы можем использовать его как обычный компонент
6. Как эффективно проводить модульное тестирование приложений React
Модульное тестирование — это тип тестирования программного обеспечения, при котором тестируются отдельные модули или компоненты программного обеспечения. Цель состоит в том, чтобы подтвердить, что каждая единица программного кода работает так, как ожидалось.
Независимо от того, какую библиотеку или фреймворк мы используем (включая React), следующие советы помогут нам писать более качественные, тестируемые, более читабельные и компонуемые компоненты пользовательского интерфейса:
- Отдавайте предпочтение чистым компонентам для кода пользовательского интерфейса: при наличии одних и тех же реквизитов всегда отображайте один и тот же компонент. Если вам нужно состояние из приложения, вы можете обернуть эти чистые компоненты компонентом-контейнером, который управляет состоянием и побочными эффектами.
- Изолируйте логику/бизнес-правила приложения в чистых редукторных функциях.
- Изолируйте побочные эффекты с помощью компонентов-контейнеров.
7. Что такое хуки в React?
React Hooks позволяет нам использовать состояние и другие функции React без необходимости определять класс JavaScript. Хуки — это обычные функции JavaScript!
Пример (с хуками):
Пример (без хуков):
8. Правила использования хуков
i) Вызывать хуки только на верхнем уровне
Мы не можем вызывать хуки внутри циклов, условий или вложенных функций. Вместо этого мы всегда можем использовать хуки на верхнем уровне. верхний уровень нашей функции React. Следуя этому правилу, мы гарантируем, что хуки вызываются в одном и том же порядке каждый раз при рендеринге компонента.
ii) Вызывать хуки только из функций React
Несмотря на то, что это функция JavaScript, мы не можем вызывать хуки из обычных функций JavaScript. Скорее, мы можем:
- Вызов хуков из функциональных компонентов React.
- Вызывать хуки из пользовательских хуков
9. Хуки useRef() ведут себя как переменные экземпляра
Объект «ref» перехватчиков useRef() — это общий контейнер, чье свойство current является изменяемым и может содержать любое значение, аналогичное свойству экземпляра класса. Мы можем писать в него изнутри useEffect
Пример:
Если бы мы просто хотели установить интервал, нам не понадобилась бы ссылка (idможет быть локальна для эффекта), но она полезна, если мы хотим очистить интервал из обработчика событий.
Пример:
10. Компоненты высшего порядка (HOC)
Компоненты более высокого порядка — это функции, которые принимают компонент и возвращают новый компонент.
Это продвинутый метод в React для повторного использования логики компонента.
Пример:
const EnhancedComponent = higherOrderComponent(WrappedComponent);
11. Веб-доступность
Сила Интернета в его универсальности.
Важным аспектом является доступность для всех, независимо от инвалидности.
— Тим Бернерс-Ли, изобретатель всемирной паутины
Веб-доступность — это инклюзивная практика обеспечения отсутствия барьеров, препятствующих взаимодействию или доступу к веб-сайтам во Всемирной паутине для людей с ограниченными физическими возможностями, ситуативными ограничениями и социально-экономическими ограничениями пропускной способности и скорости.
React полностью поддерживает создание доступных веб-сайтов, часто с использованием стандартных методов HTML.
12. Жизненный цикл компонентов React
Каждый компонент React имеет собственный жизненный цикл, жизненный цикл компонента можно определить как серию методы, которые вызываются на разных этапах существования компонента.
обычно используемые методы жизненного цикла
i) для монтирования — constructor(), render(), componentDidMount()
ii) для обновления — render(), componentDidUpdate()
iii) для размонтирования — componentWillUnmount()
13. Очередь — структура данных
Очереди — это структуры данных, которые следуют принципу «первым поступил — первым обслужен» (FIFO), т. е. первый элемент, добавляемый в очередь, удаляется первым.
Элементы всегда добавляются сзади и удаляются спереди. Думайте об этом как о очереди людей, ожидающих автобус. Человек, который стоит в начале очереди, первым входит в автобус.
Очередь в основном имеет три операции:
- поставить в очередь
- исключать из очереди
- подглядывать
Вот реализация Queue с помощью JavaScript:
class Queue {
constructor() {
// array to hold our values
this.queue = [];
// length of the array - could also track this with queue.length
this.length = 0;
}
enqueue(value) {
}
dequeue() {
}
peek() {
}
}
метод постановки в очередь()
enqueue(value) {
// add the value to the start of the queue
this.queue.unshift(value);
// update our length
this.length++;
}
метод удаления из очереди()
dequeue() {
// if we have any values
if (this.length > 0) {
// pop off the value that was added first
this.queue.pop();
// decrement the length
this.length--;
}
}
метод peek()
peek() {
const lastValIndex = this.length - 1;
if (lastValIndex >= 0) {
return this.queue[lastValIndex];
}
return false;
}
14. Связанный список — Структура данных
Связный список — это способ хранения набора элементов. Как и массив, это могут быть символы или целые числа. Каждый элемент в связанном списке хранится в виде узла.
Узел.
Узел – это набор из двух вложенных элементов или частей. Часть данных, в которой хранится элемент, и следующая часть, в которой хранится ссылка на следующий узел.
Связанный список:
Связанный список формируется, когда многие такие узлы связаны друг с другом, образуя цепочку. Каждый узел указывает на следующий узел, присутствующий в порядке. Первый узел всегда используется как ссылка для обхода списка и называется HEAD. Последний узел указывает на NULL.
Связанный список в основном имеет следующие операции:
- узел
- список связанных данных
- вставка данных
- удаление данных (из определенного индекса)
- очистка списка
Вот реализация Queue с помощью JavaScript:
Класс узла
class Node {
constructor(data, next = null) {
this.data = data;
this.next = next;
}
}
Класс LinkedList
class LinkedList {
constructor() {
this.head = null;
this.size 0;
}
}
метод вставки()
// insert will add to the end of our linked list
insert(data) {
// create a node object using the data passed in
let node = new Node(data);
let current;
// if we don't have a head, we make one
if (!this.head) {
this.head = node;
} else {
// if there is already a head, then we add a node to our list
current = this.head;
// loop until the end of our linked list (the node with no next value)
while (current.next) {
current = current.next;
}
// set the next value to be the current node
current.next = node;
}
// increment the size
this.size++;
}
метод removeAt()
// Remove at index
removeAt(index) {
// check if index is a positive number and index isn't too large
if (index > 0 && index > this.size) {
return;
}
// start at our head
let current = this.head;
// keep a reference to the previous node
let previous;
// count variable
let count = 0;
// if index is 0, then point the head to the item second (index 1) in the list
if (index === 0) {
this.head = current.next;
} else {
// loop over the list and
while (count < index) {
// first increment the count
count++;
// set previous to our current node
previous = current;
// now set our current node to the next node
current = current.next;
}
// update the next pointer of our previous node to be the next node
previous.next = current.next;
}
// since we removed a node we decrement, the size by 1
this.size--;
}
метод clearList()
clearList() {
this.head = null;
this.size = 0;
}
15. Двоичное дерево поиска — структура данных
Двоичные деревья поиска, иногда называемые упорядоченными или отсортированными двоичными деревьями, представляют собой особый тип контейнера: структуру данных, которая хранит «элементы» в памяти.
Бинарное дерево поиска включает в себя следующие термины:
- Корень. Это самый верхний узел древовидной структуры, не имеющий родителя.
- Родительский элемент: является дочерним по отношению к узлу, но также и родительским по отношению к узлу.
- Дочерний элемент. Этот узел является дочерним по отношению к узлу и не обязательно имеет дочерний узел.
В бинарном дереве поиска каждый узел имеет либо ноль, либо одного, либо двух потомков. Ребенок слева называется левым ребенком, а ребенок справа — правым ребенком. В бинарном дереве поиска дочерний элемент слева должен быть меньше дочернего элемента справа.
Мы будем использовать следующие термины для реализации двоичного дерева поиска с помощью JavaScript:
- Дерево
- Узел
- корень
- левый
- правильно
- добавлять
- Текущий
- содержит
Класс дерева
class Tree {
constructor(value) {
this.root = null
}
add(value) {
// we'll implement this below
}
}
Класс узла
class Node {
constructor(value, left = null, right = null) {
this.value = value;
this.left = left;
this.right = right;
}
}
метод add()
add(value) {
// if we do not have a root, then we create one
if (this.root === null) {
this.root = new Node(value);
return;
}
let current = this.root;
// keep looping
while (true) {
// go left if our current value is greater
// than the value passed in
if (current.value > value) {
// if there is a left child, then run the
// loop again
if (current.left) {
current = current.left;
} else {
current.left = new Node(value);
return;
}
}
// the value is smaller, so we go right
else {
// go right
// if there is a left child, then run the
// loop again
if (current.right) {
current = current.right;
} else {
current.right = new Node(value);
return;
}
}
}
}
если мы вызовем метод add(),
const t = new Tree();
t.add(2);
t.add(5);
t.add(3);
мы получим следующий вывод:
метод содержит()
contains(value) {
// get the root
let current = this.root;
// while we have a node
while (current) {
// check if our current node has the value
if (value === current.value) {
return true; // leave the function
}
// we decide on the next current node by comparing our value
// against current.value - if its less go left else right
current = value < current.value ? current.left : current.right;
}
return false;
}
16. Бинарный поиск — Алгоритм
Простой алгоритм поиска, который выполняет поиск в отсортированном массиве путем многократного деления интервала поиска пополам. Начните с интервала, охватывающего весь массив.
Если значение ключа поиска меньше элемента в середине интервала, сузьте интервал до нижней половины. В противном случае сузьте его до верхней половины. Повторяйте проверку, пока значение не будет найдено или интервал не станет пустым.
Идея бинарного поиска заключается в использовании информации о том, что массив отсортирован, и снижении временной сложности до O(log n).
Реализация бинарного поиска — JavaScript
17. Сортировка выбором — алгоритм
Сортировка выбором — это алгоритм сортировки, в частности сортировка сравнением на месте. Он имеет временную сложность O(n²), что делает его неэффективным для больших списков и, как правило, работает хуже, чем аналогичная сортировка вставками.
Временная сложность сортировки выбором:
Лучший вариант — O(n²)
Среднее – O(n²)
Худшее – O(n²)
Реализация сортировки выбором — JavaScript
18. Сортировка слиянием — Алгоритм
Сортировка слиянием — это эффективный алгоритм сортировки общего назначения на основе сравнения. Большинство реализаций производят стабильную сортировку, что означает, что реализация сохраняет порядок ввода одинаковых элементов в отсортированном выводе.
Сортировка слиянием — это алгоритм "разделяй и властвуй", изобретенный Джоном фон Нейманом в 1945 году.
Алгоритм рекурсивной сортировки слиянием, используемый для сортировки массива из 7 целочисленных значений. Это шаги, которые должен предпринять человек, чтобы эмулировать сортировку слиянием (сверху вниз).
Временная сложность сортировки слиянием:
Лучший – n log(n)
Среднее – n log(n)
Наихудший – n log(n)
Реализация сортировки слиянием — JavaScript
Вся статья представляла собой общий краткий итог второй недели изучения JavaScript и React. Следовательно, веха-2 была завершена сегодня, в 7-й день недели с начала второй недели.
Спасибо, что прочитали. Похлопайте, если вам понравилась статья.
Приятного обучения :)
Подробнее и ссылки:
https://medium.com/@rbiswas596/react-under-the-hood-68c8b5258b0c
https://medium.com/@rbiswas596/easy-react-e82ad4055401
https://medium.com/@rbiswas596/hook-up-with-the-react-hooks-7b14e2cd88a6
https://medium.com/@rbiswas596/revisiting-react-f28da9afdf99
https://medium.com/@rbiswas596/data-structures-with-javascript-a709aca5cd27
https://medium.com/@rbiswas596/algorithms-with-javascript-75b867b74865
