update ts
This commit is contained in:
@@ -3,3 +3,56 @@ sidebar_position: 1
|
||||
---
|
||||
|
||||
# Зачем нужен React
|
||||
Библиотека React — это одна из самых популярных библиотек для создания пользовательских интерфейсов (UI) на JavaScript. Она разработана Facebook (ныне Meta) и активно используется для разработки веб-приложений, мобильных приложений (с помощью React Native) и даже десктопных приложений. Вот основные причины, зачем нужна React, её преимущества и недостатки:
|
||||
|
||||
## Зачем нужна React?
|
||||
|
||||
1. **Создание динамических и интерактивных интерфейсов:**
|
||||
- React позволяет легко создавать интерфейсы, которые быстро реагируют на действия пользователя (например, клики, ввод данных и т.д.).
|
||||
- Это особенно полезно для одностраничных приложений (SPA), где интерфейс должен обновляться без перезагрузки страницы.
|
||||
2. **Компонентный подход:**
|
||||
- React основан на компонентах, которые можно переиспользовать в разных частях приложения. Это делает код более модульным и поддерживаемым.
|
||||
3. **Эффективное обновление интерфейса:**
|
||||
- React использует виртуальный DOM (Virtual DOM), который позволяет оптимизировать обновление интерфейса и минимизировать количество операций с реальным DOM. Это делает приложения быстрыми даже при большом количестве динамических данных.
|
||||
4. **Широкая экосистема:**
|
||||
- React имеет огромное сообщество и множество дополнительных библиотек (например, для маршрутизации, управления состоянием, анимаций и т.д.), что делает его универсальным инструментом для разработки.
|
||||
5. **Кроссплатформенность:**
|
||||
- С помощью React Native можно разрабатывать мобильные приложения для iOS и Android, используя те же принципы и подходы, что и в веб-разработке.
|
||||
|
||||
## Преимущества React
|
||||
1. **Простота изучения:**
|
||||
- React имеет относительно низкий порог входа, особенно для разработчиков, уже знакомых с JavaScript и HTML.
|
||||
- JSX (синтаксис, похожий на HTML) делает код более читаемым и интуитивно понятным.
|
||||
2. **Высокая производительность:**
|
||||
- Виртуальный DOM позволяет минимизировать затраты на обновление интерфейса, что делает React быстрым даже для сложных приложений.
|
||||
3. **Компонентный подход:**
|
||||
- Возможность разбивать интерфейс на независимые компоненты упрощает разработку, тестирование и поддержку кода.
|
||||
4. **Большое сообщество и экосистема:**
|
||||
- React имеет огромное сообщество, множество готовых решений, библиотек и инструментов (например, Redux, React Router, Next.js и т.д.).
|
||||
5. **Гибкость:**
|
||||
- React можно использовать как для небольших проектов, так и для крупных приложений. Он легко интегрируется с другими библиотеками и фреймворками.
|
||||
6. **Поддержка со стороны Meta:**
|
||||
- React активно развивается и поддерживается компанией Meta, что гарантирует его актуальность и долгосрочную поддержку.
|
||||
|
||||
## Недостатки React
|
||||
1. **Только для UI:**
|
||||
- React — это библиотека для создания интерфейсов, а не полноценный фреймворк. Для решения задач маршрутизации, управления состоянием и других аспектов разработки приходится использовать сторонние библиотеки.
|
||||
2. **Сложность настройки:**
|
||||
- Настройка React-проекта с нуля (например, с использованием Webpack, Babel) может быть сложной для новичков. Хотя инструменты вроде Create React App упрощают этот процесс.
|
||||
3. **JSX может быть непривычным:**
|
||||
- Синтаксис JSX, который смешивает HTML и JavaScript, может быть непривычным для некоторых разработчиков, особенно для тех, кто привык к разделению логики и разметки.
|
||||
4. **Частые обновления:**
|
||||
- React активно развивается, и иногда это приводит к необходимости переписывать код для поддержки новых версий (хотя это случается редко).
|
||||
5. **Избыточность для простых проектов:**
|
||||
- Для небольших проектов или статических сайтов React может быть избыточным, так как добавляет сложность и увеличивает размер бандла.
|
||||
6. **Проблемы с SEO:**
|
||||
- По умолчанию React-приложения рендерятся на стороне клиента, что может вызывать проблемы с индексацией поисковыми системами. Однако это решается с помощью SSR (Server-Side Rendering) и фреймворков вроде Next.js.
|
||||
|
||||
## Когда использовать React?
|
||||
- Одностраничные приложения (SPA).
|
||||
- Крупные проекты с динамическим интерфейсом.
|
||||
- Проекты, где важна производительность и переиспользуемость компонентов.
|
||||
- Кроссплатформенная разработка (веб + мобильные приложения).
|
||||
|
||||
## Итог
|
||||
**React** — это мощная и гибкая библиотека, которая подходит для создания современных веб-приложений. Её компонентный подход, высокая производительность и огромная экосистема делают её одним из лучших инструментов для разработки интерфейсов. Однако для простых проектов или статических сайтов React может быть избыточным, и в таких случаях стоит рассмотреть более легкие решения.
|
||||
@@ -3,3 +3,58 @@ sidebar_position: 2
|
||||
---
|
||||
|
||||
# Виртуальный DOM
|
||||
Механизм работы **Virtual DOM** и **Reconciliation** — это ключевые особенности React, которые делают его быстрым и эффективным для обновления пользовательских интерфейсов. Давайте разберём, как это работает.
|
||||
|
||||
## Virtual DOM (Виртуальный DOM)
|
||||
### Что такое Virtual DOM?
|
||||
Virtual DOM — это легковесная копия реального DOM (Document Object Model). Это JavaScript-объект, который представляет структуру HTML-документа. В React Virtual DOM используется для оптимизации обновлений интерфейса.
|
||||
|
||||
### Как это работает?
|
||||
1. **Создание Virtual DOM:**
|
||||
- Когда вы создаёте компоненты в React, они не напрямую взаимодействуют с реальным DOM. Вместо этого React создаёт Virtual DOM — JavaScript-представление структуры вашего интерфейса.
|
||||
2. **Рендеринг Virtual DOM:**
|
||||
- При первом рендере React создаёт Virtual DOM на основе JSX и отображает его в реальный DOM.
|
||||
3. **Обновление Virtual DOM:**
|
||||
- Когда состояние (state) или пропсы (props) компонента изменяются, React создаёт **новый Virtual DOM** (на основе обновлённых данных).
|
||||
4. **Сравнение Virtual DOM:**
|
||||
- React сравнивает новый Virtual DOM с предыдущим (этот процесс называется **Reconciliation** или "согласование").
|
||||
- React определяет, какие части Virtual DOM изменились.
|
||||
5. **Обновление реального DOM:**
|
||||
- React вносит минимально необходимые изменения в реальный DOM, чтобы он соответствовал новому Virtual DOM. Это позволяет избежать полного перерисовывания страницы.
|
||||
|
||||
## Reconciliation (Согласование)
|
||||
### Что такое Reconciliation?
|
||||
Reconciliation — это процесс сравнения старого и нового Virtual DOM для определения минимального набора изменений, которые нужно применить к реальному DOM. Этот процесс делает React эффективным, так как обновляется только то, что действительно изменилось.
|
||||
### Как это работает?
|
||||
1. **Diff-алгоритм:**
|
||||
- React использует алгоритм сравнения (Diffing Algorithm), чтобы определить различия между старым и новым Virtual DOM.
|
||||
- Алгоритм работает на основе следующих правил:
|
||||
- Элементы разных типов: Если тип элемента изменился (например, **`<div>`** стал **`<span>`**), React удаляет старое дерево и создаёт новое.
|
||||
- Элементы одного типа: Если тип элемента остался прежним, React обновляет только изменённые атрибуты (например, **`className`**, **`style`**).
|
||||
- Дочерние элементы: React рекурсивно сравнивает дочерние элементы. Если порядок дочерних элементов изменился, React может переупорядочить их в реальном DOM.
|
||||
2. **Ключи (Keys):**
|
||||
- Чтобы помочь React эффективно обновлять списки, разработчики используют атрибут **`key`**. Ключи позволяют React идентифицировать элементы списка и избежать ненужных перерисовок.
|
||||
- Например, здесь **`key`** помогает React понять, какие элементы были добавлены, удалены или изменены.
|
||||
```jsx
|
||||
<ul>
|
||||
{items.map(item => (
|
||||
<li key={item.id}>{item.name}</li>
|
||||
))}
|
||||
</ul>
|
||||
```
|
||||
3. **Пакетное обновление (Batching):**
|
||||
-React группирует несколько обновлений состояния в один пакет, чтобы минимизировать количество операций с реальным DOM. Это улучшает производительность.
|
||||
|
||||
|
||||
### Преимущества Virtual DOM и Reconciliation
|
||||
1. **Производительность:**
|
||||
- Операции с реальным DOM медленные, а Virtual DOM позволяет минимизировать количество таких операций.
|
||||
2. **Упрощение разработки:**
|
||||
- Разработчики могут сосредоточиться на описании того, как должен выглядеть интерфейс в конкретный момент времени (на основе состояния), а React автоматически обновляет DOM.
|
||||
3. **Кроссплатформенность:**
|
||||
- Virtual DOM используется не только в веб-приложениях, но и в React Native для мобильной разработки.
|
||||
|
||||
## Итог
|
||||
- **Virtual DOM** — это оптимизированная копия реального DOM, которая позволяет React быстро обновлять интерфейс.
|
||||
- **Reconciliation** — это процесс сравнения старого и нового Virtual DOM для определения минимального набора изменений.
|
||||
- Вместе эти механизмы делают React быстрым, эффективным и удобным для разработки сложных интерфейсов.
|
||||
135
docs/typescript/02-data-types.md
Normal file
135
docs/typescript/02-data-types.md
Normal file
@@ -0,0 +1,135 @@
|
||||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Типы данных
|
||||
TypeScript — это строго типизированный язык программирования, который расширяет JavaScript, добавляя статическую типизацию. В TypeScript используются как **базовые типы данных** (примитивы), так и **продвинутые типы**, которые позволяют более точно описывать структуру данных. Вот основные типы данных в TypeScript:
|
||||
|
||||
## 1. Примитивные типы (Primitive Types)
|
||||
1. **`number`** - Числа, включая целые и дробные.
|
||||
2. **`string`** - Строки текста.
|
||||
3. **`boolean`** - логические значения: true или false.
|
||||
4. **`null`** - Значение, представляющее отсутствие значения.
|
||||
5. **`undefined`** - Значение, которое присваивается переменной, если она не инициализирована.
|
||||
6. **`symbol`** - Уникальные и неизменяемые значения, часто используемые как ключи объектов.
|
||||
|
||||
## 2. Специальные типы
|
||||
Эти типы используются для описания специфических случаев.
|
||||
1. **`any`** - Отключает проверку типов. Переменная может хранить любое значение.
|
||||
```ts
|
||||
let data: any = "Hello";
|
||||
data = 42; // Ошибки не будет
|
||||
```
|
||||
2. **`unknown`** - Более безопасная альтернатива any. Тип переменной должен быть уточнён перед использованием.
|
||||
```ts
|
||||
let value: unknown = "Hello";
|
||||
if (typeof value === "string") {
|
||||
console.log(value.toUpperCase()); // Безопасно
|
||||
}
|
||||
```
|
||||
3. **`void`** - Используется для функций, которые не возвращают значение.
|
||||
```ts
|
||||
function logMessage(): void {
|
||||
console.log("Hello");
|
||||
}
|
||||
```
|
||||
4. **`never`** - Используется для функций, которые никогда не завершаются (например, выбрасывают исключение или работают бесконечно).
|
||||
```ts
|
||||
function throwError(message: string): never {
|
||||
throw new Error(message);
|
||||
}
|
||||
```
|
||||
|
||||
## 3. Объектные типы (Object Types)
|
||||
Эти типы используются для описания сложных структур данных.
|
||||
1. **`object`** - Общий тип для объектов.
|
||||
```ts
|
||||
let user: object = { name: "Alice", age: 25 };
|
||||
```
|
||||
2. **Массивы (Arrays)** - Массивы могут быть описаны двумя способами:
|
||||
- **`тип[]`**
|
||||
- **`Array<тип>`**
|
||||
```ts
|
||||
let numbers: number[] = [1, 2, 3];
|
||||
let names: Array<string> = ["Alice", "Bob"];
|
||||
```
|
||||
3. **Кортежи (Tuples)** - Массивы фиксированной длины с определёнными типами для каждого элемента.
|
||||
```ts
|
||||
let user: [string, number] = ["Alice", 25];
|
||||
```
|
||||
4. **Функции (Functions)** - Типы для аргументов и возвращаемых значений функций.
|
||||
```ts
|
||||
function add(a: number, b: number): number {
|
||||
return a + b;
|
||||
}
|
||||
```
|
||||
5. **Классы (Classes)** - TypeScript поддерживает ООП, включая классы, наследование и модификаторы доступа.
|
||||
```ts
|
||||
class User {
|
||||
name: string;
|
||||
constructor(name: string) {
|
||||
this.name = name;
|
||||
}
|
||||
}
|
||||
```
|
||||
## 4. Продвинутые типы
|
||||
Эти типы позволяют создавать более гибкие и мощные структуры данных.
|
||||
1. **Интерфейсы (Interfaces)** - Используются для описания структуры объектов.
|
||||
```ts
|
||||
interface User {
|
||||
name: string;
|
||||
age: number;
|
||||
}
|
||||
let user: User = { name: "Alice", age: 25 };
|
||||
```
|
||||
2. **Типы-объединения (Union Types)** - Переменная может иметь один из нескольких типов.
|
||||
```ts
|
||||
let id: string | number = "123";
|
||||
id = 123; // Ошибки не будет
|
||||
```
|
||||
3. **Типы-пересечения (Intersection Types)** - Комбинирует несколько типов в один.
|
||||
```ts
|
||||
interface Name {
|
||||
name: string;
|
||||
}
|
||||
interface Age {
|
||||
age: number;
|
||||
}
|
||||
type User = Name & Age;
|
||||
let user: User = { name: "Alice", age: 25 };
|
||||
```
|
||||
4. **Литеральные типы (Literal Types)** - Переменная может принимать только определённые значения.
|
||||
```ts
|
||||
let direction: "left" | "right" | "up" | "down" = "left";
|
||||
```
|
||||
5. **Типы-шаблоны (Generics)** - Позволяют создавать универсальные компоненты, которые работают с разными типами.
|
||||
```ts
|
||||
function identity<T>(arg: T): T {
|
||||
return arg;
|
||||
}
|
||||
let output = identity<string>("Hello");
|
||||
```
|
||||
## 5. Дополнительные типы
|
||||
1. **`enum`** - Перечисления, которые позволяют задавать именованные константы.
|
||||
```ts
|
||||
enum Color {
|
||||
Red,
|
||||
Green,
|
||||
Blue,
|
||||
}
|
||||
let color: Color = Color.Red;
|
||||
```
|
||||
2. **Типы для работы с DOM** - TypeScript предоставляет встроенные типы для работы с DOM-элементами, например, **`HTMLElement`**, **`HTMLInputElement`** и т.д.
|
||||
```ts
|
||||
const element: HTMLElement = document.getElementById("myElement");
|
||||
```
|
||||
|
||||
## Итог
|
||||
TypeScript предоставляет богатую систему типов, которая включает:
|
||||
|
||||
- Примитивные типы (**`number`**, **`string`**, **`boolean`** и т.д.).
|
||||
- Специальные типы (**`any`**, **`unknown`**, **`void`**, **`never`**).
|
||||
- Объектные типы (массивы, кортежи, функции, классы).
|
||||
- Продвинутые типы (интерфейсы, объединения, пересечения, дженерики).
|
||||
|
||||
Эти типы помогают писать более безопасный и поддерживаемый код, а также улучшают инструменты разработки, такие как автодополнение и проверка ошибок.
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
sidebar_position: 2
|
||||
sidebar_position: 3
|
||||
---
|
||||
|
||||
# Отличие types от interface
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
sidebar_position: 3
|
||||
sidebar_position: 4
|
||||
---
|
||||
|
||||
# Utility types
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
sidebar_position: 4
|
||||
sidebar_position: 5
|
||||
---
|
||||
|
||||
# Generic types
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
sidebar_position: 5
|
||||
sidebar_position: 6
|
||||
---
|
||||
|
||||
# Type guards
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
sidebar_position: 6
|
||||
sidebar_position: 7
|
||||
---
|
||||
|
||||
# Enums и as const
|
||||
Reference in New Issue
Block a user