Render Props

Render Props в React — это паттерн для повторного использования логики между компонентами. Вместо того чтобы делать компоненты "умными" или использовать HOC (Higher-Order Components), компонент с Render Props использует функцию для рендеринга, передаваемую через проп.

Зачем нужно?

✔️ Повторное использование логики: Логику можно вынести в один компонент и использовать с разным UI.
✔️ Гибкость: Позволяет передавать любую JSX разметку, что делает компонент более универсальным.

#frontend #react

👩‍💻 Архитектура Frontend с Нуля до Продакшена. Docker, Webpack, CI/CD, React, Deploy

В этом видео мы подробно рассмотрим архитектуру Frontend-приложений, начиная с технологий и инструментов, заканчивая настройками и деплоем. Это будет комплексный обзор всех ключевых компонентов архитектуры: React, Redux, Storybook, Webpack, Docker, Nginx, CI/CD и других технологий.

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

📌 Схема

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

#frontend #react #docker #cicd #deploy

👩‍💻 React Fiber

Ранее React использовал механизм Stack Reconciler для обновления интерфейсов, что приводило к проблемам с производительностью. Одним из главных недостатков было невозможность приостановить и возобновить рендеринг, что могло вызывать "замораживание" интерфейса при выполнении тяжёлых операций. Чтобы устранить этот недостаток, начиная с React 16, была создана новая архитектура — React Fiber.

❓ Что такое React Fiber?

React Fiber — это переработанная структура внутреннего устройства React, которая управляет процессом рендеринга и согласования (reconciliation). Основное нововведение заключается в том, что теперь React разбивает весь процесс обновления на мелкие задачи, которые можно:

1. Приостанавливать.
2. Прерывать для выполнения более важных операций.
3. Возобновлять с того же места.
4. Отменять обновления, если компонент больше не нужен.

Эта архитектура помогает React быть более отзывчивым и гибким в работе с сложными интерфейсами.

📈 В чём ключевая идея Fiber?

Вместо использования традиционного стека для отслеживания состояния компонентов, Fiber создаёт связанную структуру данных для каждого элемента виртуального DOM. Это позволяет React двигаться вперед и назад по компонентному дереву, задавать приоритет задач и управлять состояниями на уровне узлов.

Каждый узел Fiber содержит:
- Тип компонента (функциональный, классовый или элемент DOM).
- Ссылки на дочерние, родительские и соседние узлы.
- Текущее состояние и приоритет выполнения.

Такой подход позволяет React выполнять задачи в соответствии с их приоритетом:
- Высокий приоритет: действия пользователя (клики, ввод текста).
- Низкий приоритет: обновление анимации или загрузка данных.

🖥 Как это работает на практике?

React Fiber использует две основные фазы рендеринга:

📌 Фаза рендеринга (Render Phase):
React создаёт новое дерево Fiber, вычисляя, какие изменения должны быть сделаны.
Эта фаза может прерываться и возобновляться.

📌 Фаза выполнения (Commit Phase):
Все изменения применяются к реальному DOM.
Происходит быстро и синхронно, чтобы интерфейс обновлялся без задержек.

🛡 Особенности React Fiber:

- Time Slicing: React разбивает выполнение задач на короткие промежутки времени, чтобы не блокировать интерфейс.
- Асинхронный рендеринг: позволяет приостанавливать и возобновлять рендеринг компонентов.
- Гибкое управление задачами: React определяет, какие задачи выполнять первыми, а какие можно отложить, чтобы обеспечить плавное взаимодействие с пользователем.

#frontend #react

👩‍💻 Рендеринг в React

В React рендеринг — это процесс, при котором компонент заново отрисовывается на основе новых данных. Этот процесс происходит по нескольким причинам:

📌 1. Изменение состояния (state)
Если состояние компонента меняется, React автоматически запускает его ререндеринг. Например:

const CounterButton = () => {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Click me {count} times
    </button>
  );
};

Когда мы вызываем setCount, значение count меняется, что приводит к ререндерингу компонента, чтобы отобразить обновлённое число.

📌 2. Изменение пропсов (props)
Пропсы сами по себе не являются первичной причиной ререндеринга, а скорее следствием изменения состояния в родительском компоненте. Если состояние родителя обновляется, он перерисовывается и передает изменённые пропсы дочернему компоненту. Это приводит к ререндерингу дочернего компонента:

// Родительский компонент
const Parent = () => {
  const [text, setText] = useState('Hello');

  return (
    <>
      <Child message={text} />
      <button onClick={() => setText('Hello, World!')}>Change Text</button>
    </>
  );
};

// Дочерний компонент
const Child = ({ message }) => <div>{message}</div>;

Когда setText меняет состояние text, компонент Parent перерисовывается, и передаёт новое значение пропса message в Child, что вызывает ререндеринг дочернего компонента.

Примечание: При использовании React.memo изменения пропсов действительно считаются причиной ререндеринга, если новый пропс отличается от предыдущего.

📌 3. Изменение контекста (Context)
Если компонент использует контекст (useContext или <Context.Consumer>), и его значение меняется, то все компоненты, подписанные на этот контекст, будут перерисованы:

const ThemeContext = React.createContext('light');

const Parent = () => {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={theme}>
      <Child />
      <button onClick={() => setTheme('dark')}>Toggle Theme</button>
    </ThemeContext.Provider>
  );
};

const Child = () => {
  const theme = useContext(ThemeContext);
  return <div>Current theme: {theme}</div>;
};

Когда значение контекста theme изменяется (например, с 'light' на 'dark'), компонент Child ререндерится, чтобы отобразить новое значение темы.

📌 4. Ререндеринг родительского компонента
Даже если состояние компонента и его пропсы остаются неизменными, он будет перерисован, если родительский компонент ререндерится (даже без видимых изменений). Это связано с тем, что дочерние компоненты автоматически ререндерятся вместе с родительским компонентом. Например:

const Parent = () => {
  const [count, setCount] = useState(0);

  return (
    <>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <Child />
    </>
  );
};

const Child = () => <div>I'm a child</div>;

Здесь Child не зависит от состояния count, но каждый раз, когда Parent ререндерится, Child ререндерится тоже. Это можно предотвратить с помощью React.memo.

❓ Как избежать лишних ререндеров?

✔️ React.memo: предотвращает ререндеринг компонента, если его пропсы не изменились.
✔️ Хук useCallback и useMemo: сохраняют функции и значения, чтобы они не создавались заново при каждом ререндеринге.
✔️ Оптимизация контекста: разбивайте контекст на отдельные провайдеры, чтобы уменьшить количество компонентов, реагирующих на изменение его значения.

#react #frontend #memo #render

🥸 О мифе сеньорского кода и чистоте разработки

Многие разработчики, особенно новички, считают, что их код недостаточно хорош, и мечтают увидеть «настоящий сеньорский код», чтобы перенять оттуда секреты чистоты и мастерства. Но правды ради, такого особенного сеньорского кода не существует.

На самом деле, в каждой компании, и даже в твоем Пет-проекте, код похож. Компоненты они и в Африке компоненты. Научиться писать качественный код можно просто, следуя базовым принципам и простой логике, без мифических сеньорских стандартов.

Чем отличается код в больших компаниях от твоего небольшого проекта? В маленьком проекте меньше сущностей, проще структура, и поддерживать его легче. А вот в крупном проекте добавляются интеграции, компоненты, обработка ошибок, загрузчики и множество других деталей, которые усложняют работу над ним. За счёт этого код в больших компаниях выглядит более «загруженным» и сложным.

💡 Главные навыки, которые необходимы в реальной разработке, — это умение читать чужой код, разбираться в проекте и подстраиваться под командные требования.

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

Я часто общаюсь с разработчиками из разных компаний, и многие, видя код в YeaHub, отмечают, что у нас он чище, чем в некоторых крупных корпорациях, таких как Сбер или Газпром. В погоне за релизом, мы немного испортили код, но после релиза начнем рефакторинг

Вот основные принципы хорошего кода:

✏️ Декомпозиция: разбивайте код на более мелкие, логичные части. Это упрощает понимание, отладку и позволяет использовать код повторно.

✏️ Разделяйте ответственность: каждая функция, компонент или модуль должны выполнять одну конкретную задачу. Это делает код более предсказуемым и простым в поддержке.

✏️ Избегайте дублирования кода: если встречаете повторяющиеся блоки, вынесите их в отдельные функции или компоненты. Это упростит изменения и уменьшит количество ошибок.

✏️ Логически определяйте блоки кода и сущности: структурируйте код так, чтобы каждая его часть занималась своей ролью. Например, обработку данных выделяйте отдельно от их отображения.

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

✏️ Делайте компоненты модифицируемыми: при разработке учитывайте возможность добавления новой функциональности без изменения уже существующего кода. Это упростит поддержку и добавление новых фич.

✏️ Избегайте жесткой связанности модулей: минимизируйте зависимости между модулями. Если один компонент сильно зависит от другого, это усложнит поддержку и тестирование. Используйте инъекцию зависимостей и интерфейсы для уменьшения связанности.

💡 В 80% случаев хороший код — это не паттерны, а простая логика и внимание к деталям.

#frontend #react #senior

👩‍💻 Подключение компонента с помощью connect

Хотя хуки являются современным способом работы с Redux, вы также можете использовать метод connect из библиотеки react-redux для подключения компонентов к Redux. Это более старый способ, но он по-прежнему широко используется и имеет свои преимущества.

// Компонент
const TodoList = ({ todos, addTodo, removeTodo }) => {
    // some logic
    return ();
};

// Определяем, какие данные из Redux store передать компоненту
const mapStateToProps = (state) => ({
    todos: state.todos.todos,
});

// Определяем, какие действия передать компоненту
const mapDispatchToProps = {
    addTodo,
    removeTodo,
};

// Подключаем компонент к Redux
export default connect(mapStateToProps, mapDispatchToProps)(TodoList);

Делаю сейчас курс по Redux + Redux Toolkit + RTK Query и вспомнил, как раньше подключались компоненты. Блин, выглядит круто. Может снова так делать.😅

Кто помнит? Олды есть?

#redux #react

👩‍💻 Принципы Redux

Redux основывается на нескольких ключевых принципах, которые помогают организовать и управлять состоянием приложения.

🔒 Единое хранилище (Single Source of Truth)

В Redux есть только одно общее хранилище, которое содержит все состояние приложения. Это облегчает управление состоянием и делает его предсказуемым.

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

const initialState = {
    todos: [],
    user: null,
};

// Всё состояние хранится в одном объекте
const state = {
    todos: ['Задача 1', 'Задача 2'],
    user: { name: 'Иван', age: 30 },
};

👀 Состояние только для чтения (Read-Only State)

Единственным способом изменения состояния является отправка действия (action). Это гарантирует, что изменения состояния происходят только через определенные точки (actions), что делает их предсказуемыми.

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

// Действие для добавления задачи
const addTodo = (text) => ({
    type: 'ADD_TODO',
    payload: text,
});

// Изменение состояния только через действие
store.dispatch(addTodo('Новая задача'));

✨ Чистые функции редюсеры (Pure Functions)

Редюсеры должны быть чистыми функциями. Это значит, что для одинаковых входных данных они всегда должны возвращать одинаковый результат, и они не должны изменять свои входные данные.

Чистые функции делают состояние предсказуемым и упрощают отладку. Они не имеют побочных эффектов и не влияют на внешние состояния.

const todoReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'ADD_TODO':
            return {
                ...state,
                todos: [...state.todos, action.payload],
            };
        default:
            return state; // Возвращаем новое состояние, не изменяя текущее
    }
};

⬇️ Однонаправленный поток данных (Unidirectional Data Flow)

Поток данных в Redux всегда односторонний. Это означает, что данные передаются от состояния к представлению, и изменения состояния происходят только через действия.

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

// Пример потока данных
const mapStateToProps = (state) => ({
    todos: state.todos,
});

// Компонент получает данные
const TodoList = ({ todos }) => (
    <ul>
        {todos.map((todo, index) => (
            <li key={index}>{todo}</li>
        ))}
    </ul>
);

// Связываем компонент с Redux
export default connect(mapStateToProps)(TodoList);

#redux #frontend #react #flux

🔼 Почему важно использовать lazy-loading

Lazy-loading (ленивая загрузка) — это способ загружать ресурсы (изображения, компоненты) только тогда, когда они нужны. Это улучшает скорость загрузки страницы, снижает нагрузку на сервер и экономит трафик.

⚠️ Проблема

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

✔️ Решение

Lazy-loading изображений
Современный HTML позволяет указать атрибут loading="lazy":

<img src="example.jpg" alt="Описание" loading="lazy" />

Это простой и поддерживаемый способ ленивой загрузки.

Lazy-loading компонентов в React
В React можно использовать React.lazy и Suspense:

import React, { Suspense } from 'react';

const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <div>
      <h1>Главная страница</h1>
      <Suspense fallback={<div>Загрузка...</div>}>
        <HeavyComponent />
      </Suspense>
    </div>
  );
}

Компонент HeavyComponent загрузится только тогда, когда он понадобится.

💎 Преимущества
- Ускоряет загрузку страницы.
- Снижает объем передаваемых данных.
- Улучшает производительность и SEO.

Используйте lazy-loading, чтобы сделать ваши проекты быстрее и удобнее для пользователей.

#lazy #react #optimization

👩‍💻 5 продвинутых паттернов в React

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

- Slot Pattern (Component Injection)
- Render Prop
- Proxy Component
- Function as a Child
- Compound Components

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

#frontend #react #patterns

👩‍💻 Принципы SOLID в React

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

- Single Responsibility Principle (Принцип единственной ответственности)
- Open/Closed Principle (Принцип открытости/закрытости)
- Liskov Substitution Principle (Принцип Барбары Лисков)
- Interface Segregation Principle (Принцип разделения интерфейса)
- Dependency Inversion Principle (Принцип инверсии зависимостей)

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

🔗 Репозиторий

#react #solid #frontend

👩‍💻 Принципы ООП в React.

В этом видео разберем основные принципы ООП — инкапсуляцию, наследование, полиморфизм и абстракцию — и покажем, как они работают в React. Узнаем, что такое Render Props, Component Injection, композиция и декомпозиция, и применим их в функциональных компонентах, Custom Hooks и HOCs.

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

🔗 Репозиторий

#frontend #react #ооп

👩‍💻 Продвинутый React

Выпущено три видео по паттернам и принципам программирования:

📹 5 продвинутых паттернов в React – изучаем ключевые подходы и паттерны в разработке React-приложений: Render Props, Slot Pattern (Component Injection), Proxy Component, Function as a Child, Compound Components.

📹 Принципы SOLID в React – учимся создавать переиспользуемые компоненты, используя SOLID-принципы. Разбираем, как правильно декомпозировать код и проектировать архитектуру с учетом лучших практик.

📹 Принципы ООП в React – закрепляем понимание объектно-ориентированного программирования, разбираем, откуда берутся паттерны и подходы, и как они помогают в разработке.

💡 Для чего это нужно?

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

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

#frontend #react #solid #oop

👨‍💻 План развития Frontend Разработчика (Часть 3)

Ты уже освоил базу: HTML, CSS, JavaScript. Но в реальности никто не пишет проекты на чистом коде — это долго, сложно и неэффективно. Если ты написал что-то на чистом JS без фреймворков, то, грубо говоря, ты создал свой фреймворк. Другим разработчикам будет тяжело разобраться в твоём коде, а поддержка такого проекта превратится в ад.

Решение? Готовые фреймворки и библиотеки. Они дают структуру, правила и экосистему, упрощают разработку и делают код предсказуемым.

Среди популярных вариантов — Vue, Angular, Svelte, Solid, но мы остановимся на React. Почему? Потому что он мощный, гибкий и востребованный на рынке. Давай разберёмся, как его правильно учить.

👩‍💻 React + Router (< 2 месяцев)

React — это основной инструмент, с которым ты будешь работать. Если ты можешь сделать ToDo App, то это уже похоже на коммерческий код. Чем рабочий код отличается от пет-проектов? Объёмом, структурой, абстракциями, обёртками, разделением на модули.

Когда ты делаешь простое приложение (например, Кинотеатр), ты уже сталкиваешься с реальными кейсами:
- Работа с API
- Отрисовка данных
- Поиск и фильтрация
- Роутинг
- Управление состоянием

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

Для изучения React я предлагаю максимально подготовить свой мозг и пройти 2 курса по React, повторяя за автором и делая конспект:

→ React - Курс по React для Начинающих
https://www.youtube.com/watch?v=is3T0W0ouT0

→ Курс React с нуля
https://youtu.be/am_UiIvha5M?si=7io3qRZITckfH2zA

Далее проходим более подробный курс с дотошным объяснением базы от Димыча:

→ Todolist React JS
https://www.youtube.com/watch?v=pzs3a-d3kjM

После этого приступаем к практике и делаем приложение новостей с основными фичами фронтенда: Поиск, Фильтрация, Пагинация, Слайдер и т.д. Тут также произойдёт первое знакомство с TypeScript, Redux, Router, FSD:

→ React Новости
https://youtu.be/bD0UXb7kD_k?si=e5Y5Jkiwt_66U5Ug

Далее углубляем свои знания и смотрим, как создают большое приложение Pizza:

→ React Pizza v2
https://youtu.be/_UywBskWJ7Q?si=WN2kX8Eck9BW_OD3

Ещё больше практики, чтобы уже тошнило, а мозг окончательно привык к React:

→ Разработай 6 проектов на ReactJS
https://youtu.be/eS0GL73tkmw?si=2G36Y4n-bYI4hnT1

Изучаем базу роутинга и применяем сразу на практике

→ React Router 6
https://youtu.be/0auS9DNTmzE?si=GGuidPN1NpfvVAiw

🖥 TypeScript (≤10 дней)

На самом деле ТС очень сложный. Даже опытные разработчики не умеют решать сложные задачи. Проходим 2 курса в YouTube:

→ Полный курс TypeScript
https://www.youtube.com/watch?v=V7hBejCH1HI

→ TypeScript ФУНДАМЕНТАЛЬНЫЙ КУРС
https://youtu.be/LWtHl__oEWc?si=E3MJHqHHMM68NblJ

Если за 10 дней не освоили базис — всё равно идём дальше. Остальное натренируется в проектах. Сложные темы: дженерики, утилити-типы, защитники типов, маппинг — вы не поймёте их, пока не начнёте практиковаться в полном стеке. Нам нужна база, которая покрывает 80% рабочей нагрузки.

👩‍💻 Redux + RTK (3-4 недели)

Тут так же как и в TypeScript. Redux имеет кучу инструментов. Но для того чтобы нам понять его - нужна практика. У многи новичков проблема с ним. Что нам нужно уметь: создавать слайсы, использовать данные в компонентах, использовать диспатч, делать запросы на сервер с санками или rtk query. Это база, которая уже позволит вам делать приложение. остальное изучаем уже на практике всего стека.

→ Полный курс Redux
https://www.youtube.com/watch?v=gPmYTqGPDWA

→ Redux Toolkit для управления
https://www.youtube.com/watch?v=C0fBnil_Im4

То же самое и с Redux. Хотя в нём много инструментов, главное — начать практиковаться. У многих новичков возникают сложности. Базовые навыки, которые нужно освоить: Создание слайсов, Использование данных в компонентах, Работа с диспатчем, Запросы к серверу (санки или RTK Query)

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

#redux #roadmap #frontend #react #typescript

👨‍💻 План развития Frontend Разработчика (Часть 4)

Когда мы изучили полный стек: React, Router, Redux, TypeScript - начинаем очень много практиковаться. Набивать руку и развивать мышление.

Можно смотреть, как делают большие приложения (рекомендуется смотреть в Яндекс.Браузере с переводом):

https://youtu.be/0mdjgQdQF1k
https://youtu.be/fq7k_gVV5x8
https://youtu.be/xZ1ba-RLrjo
https://youtu.be/-7K_0NRLCu4
https://youtu.be/JKuofETX0GM

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

Как выбрать проект:
- Не берите готовые идеи из YouTube
- Не копипастите код без понимания
- Делайте всё самостоятельно

Примеры идей:
- Приложение магазин с товарами
- Аналитика футбола с API футболистов
- Приложение с картой для просмотра самолётов

Где брать ресурсы:
- Публичные API (найдите в браузере: "публичное API самолётов/футболистов" и т.д.)
- Бесплатные дизайны в Figma (или создайте простой прототип)

Главное, чтобы вам было интересно и был азарт!

Это репозиторий YeaHub. Здесь используется куча инструментов, много страниц — всё грамотно настроено. Мои ученики тут проходят финальную практику перед выходом на рынок. Это даёт мощный буст: их обучение чётко делится на "до" и "после".

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

https://github.com/YeaHubTeam/yeahub-platform

После того, как вы уже можете разрабатывать приложения в полном стеке, можно углублять знания

→ Архитектура Frontend с Нуля до Продакшена. Docker, Webpack, CI/CD, React, Deploy
https://www.youtube.com/watch?v=GJe0-oPbiqw

→ Деплой Frontend приложения.
https://youtu.be/8OHe6chCWTE?si=JQpY1Bki7Cj6GiZC

→ Feature-Sliced Design
https://www.youtube.com/watch?v=O4SDx-aZY5U

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

📹 5 продвинутых паттернов в React – изучаем ключевые подходы

📹 Принципы SOLID в React – учимся создавать переиспользуемые компоненты, используя SOLID-принципы

📹 Принципы ООП в React – закрепляем понимание объектно-ориентированного программирования

С самого начала параллельно с изучением технологий готовься к собеседованиям. Каждый раз после освоения новой темы закрепляй теорию — проходи вопросы в тренажере 🚀 YeaHub.

#курс #frontend #react

👩‍💻 React Fiber

React Fiber — это новый алгоритм согласования (reconciliation), представленный в React 16. Он заменил старый механизм обновления Virtual DOM

🗓 Что было до Fiber?

До React 16 использовался стековый алгоритм рендеринга. Его ограничения:

→ Синхронный рендеринг – React выполнял обновление за один проход, блокируя основной поток. Если дерево компонентов было большим, это вызывало лаги.

→ Невозможность приоритизации – Все обновления обрабатывались в порядке очереди, даже если некоторые (например, анимации или пользовательский ввод) требовали более быстрой реакции.

→ Отсутствие прерываний – Процесс нельзя было разбить на части или отложить, что усложняло реализацию плавного интерфейса.

🔼 Почему Fiber — это улучшение?

Fiber решает эти проблемы, вводя:

→ Инкрементальный рендеринг – Работа разбивается на небольшие части, которые выполняются в несколько кадров, избегая блокировки потока.

→ Приоритезацию задач – Критичные обновления (например, клики) обрабатываются раньше фоновых (рендер тяжёлых списков).

→ Возможность паузы и возобновления – React может прервать рендеринг для выполнения более важной задачи, а затем продолжить.

→ Поддержку рендеринга вне основного потока – Это основа для Concurrent React, позволяющего выполнять вычисления параллельно.

Fiber не изменил принцип работы Virtual DOM, но сделал его обновление более умным и адаптивным.

#react #fiber