CodeRoll | Frontend

⚛️ Продвинутые концепции React: Хуки, Контекст и Оптимизация производительности Конечно! Вот пост для более продвинутых разработчиков, посвященный углубленным темам и современным подходам в React. ⚛️ Продвинутые концепции React: Хуки, Контекст и Оптимизация производительности 🔥 Если вы уже знакомы с основами React, пришло время углубиться в более сложные концепции, которые помогут создавать более гибкие и производительные приложения. 🔄 React Hooks: Революция в управлении состоянием и побочными эффектами Hooks, представленные в React 16.8, позволили отказаться от классовых компонентов в пользу функциональных, сохраняя при этом все возможности управления состоянием и жизненным циклом компонента. - useState: Позволяет добавлять состояние в функциональные компоненты. - useEffect: Управляет побочными эффектами, такими как подписки, API-запросы и манипуляции с DOM. - useMemo и useCallback: Оптимизируют производительность, предотвращая ненужные рендеры и создания функций.

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  const increment = useCallback(() => setCount(count + 1), [count]);

  return <button onClick={increment}>Click me</button>;
};

🌐 React Context: Управление глобальным состоянием Контекст позволяет передавать данные (например, тему или авторизацию) через дерево компонентов без необходимости пробрасывать пропсы на каждом уровне. Создание контекста: const MyContext = React.createContext(defaultValue); Использование в компонентах: const value = useContext(MyContext); Контекст полезен, когда нужно избежать "prop drilling", но важно помнить, что его чрезмерное использование может усложнить отладку и понимание кода. ⚡️ Оптимизация производительности: Мемоизация, разделение кода и Concurrent Mode Для повышения производительности приложений на React важно учитывать несколько ключевых аспектов: Мемоизация с React.memo, useMemo, useCallback — предотвращает повторные рендеры, если пропсы или состояние не изменились. Code Splitting с помощью React.lazy и Suspense — позволяет загружать компоненты по мере необходимости, снижая начальный вес приложения. Concurrent Mode — новый подход к рендерингу, позволяющий React выполнять задачи без блокировки пользовательского интерфейса.

📘 5 must-read книг по JavaScript 🎯 JavaScript — язык, который постоянно развивается, и чтобы оставаться на гребне волны, важно углублять свои знания. Вот 5 книг, которые обязательно стоит прочитать каждому разработчику: "You Don't Know JS" (Kyle Simpson) — серия из шести книг, которая глубоко погружается в концепции языка. "JavaScript: The Good Parts" (Douglas Crockford) — классика, которая научит писать чистый и эффективный код. "Eloquent JavaScript" (Marijn Haverbeke) — книга, которая поможет новичкам освоить JavaScript, а опытным разработчикам углубить свои знания. "JavaScript: The Definitive Guide" (David Flanagan) — подробное руководство, которое часто называют "библией JavaScript". 📚 Эти книги помогут вам не только улучшить навыки, но и понять, как работает JavaScript изнутри. Чтение — отличный способ перейти на новый уровень!

🔧 CSS Grid — создание сложных макетов с минимальными усилиями 🎨 CSS Grid — мощный инструмент для создания сложных макетов, который значительно упрощает работу с версткой. 💡 Основные концепции: - Grid Container — контейнер, в котором работает - сетка. - Grid Items — элементы, расположенные внутри контейнера. - Grid Lines — линии, определяющие структуру сетки. 🌐 Пример простого макета с Grid:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.item {
  background-color: #f4f4f4;
  padding: 20px;
  text-align: center;
}

⏩ Результат: Макет с тремя равными колонками, разделенными отступами. CSS Grid упрощает создание адаптивных макетов без сложных вычислений. 📘 Полезные ресурсы: CSS Grid Garden — Интерактивная игра для изучения CSS Grid. Отличный способ закрепить теорию на практике в игровой форме. MDN Web Docs: CSS Grid Layout — Документация от Mozilla. Включает описание всех свойств, связанных с CSS Grid, с примерами и детальными объяснениями.

Отличия Function components от class components? Основные отличия это: 1) Классовые компоненты медленнее, из-за большого количества встроенных методов 2) Классовые компоненты имеют больше методов жизненного цикла 3) Множество синтаксических различий И самый важный пункт, классовые компоненты официально не развиваются, и разработчики React решили что будущее React в хуках. Получается можно забыть про классовые компоненты? Да, в реальном коде почти нет ситуаций когда классовый компонент будет лучше функционального, можно вспомнить про error boundary, который для своей реализации требует метод из классового компонента, но в противовес есть сторонние библиотеки, реализующие нужное поведение под капотом, или можно зайти на официальный сайт React и скопировать классовый компонет error boundary, и немного его поправить под себя, какой то специфичной логики там нет. Вот ссылка на Error boundary, если интересно https://ru.react.js.org/docs/error-boundaries.html

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

Что такое атрибут key? Для чего он нужен? Key помогает React определять, какие элементы были изменены, добавлены или удалены. Key нужен для лучшего определения порядка элементов в списке. Key всегда должен присваивается на верхнем уровне: Правильно:

const howUseKey = () => {
  const array = [1, 2, 3];
  return (
    <div>
      {array.map((item) => (
        <div key={item}>{item}</div>
      ))}
    </div>
  );
};

Неправильно (Приглядитесь к its a trap):

const howNotUseKey = () => { 
 const array = [1, 2, 3];
  return (
    <div>
      {array.map((item) => (
        <div className="its a trap">
          <div key={item}>{item}</div>
        </div>
      ))}
    </div>
  );
};

Если использовать индекс массива или другие значения которые могут меняться, то мы можем получить неприятные баги. Лучше всего использовать уникальный id объекта. Более подробно про key можете прочитать здесь

Дарим билет в мир большого IT 🎫 От тебя нужен только опыт работы разработчиком JS+React от года и желание попасть в команду Холдинга Т1 — одного из лидеров российского ИТ-рынка, в портфеле которого 800+ высокотехнологичных проектов и 70+ продуктов и услуг. Регистрируйся на онлайн-интенсив в Открытые школы Т1 и прокачай навыки бесплатно всего за 1 месяц. Лучшие получат оффер от Т1 🔝 и уникальный карьерный фаст-трек до мидла в бигтехе. Всего за полгода мы выпустили 500+ специалистов. Участники присоединились к командам финтех-разработки и разработки ИТ-продуктов. Также участников ждут в юнитах облачных сервисов, развития ИИ-решений, интеграции и консалтинга. ⌛️ Быстрое обучение: 1 месяц. 💻 Гибкий формат: все этапы онлайн, занятия по вечерам. 🌏 Работа в Т1 возможна с тер-рии РФ и Беларуси. Ты с нами? Тогда подавай заявку до 24 июля! Старт интенсива — 29 июля. Реклама. ООО "Т1". ИНН 7720484492.

Как узнать количество перерисовок? React Custom Hook: useRenderCount В этой серии статей мы отправимся в путешествие по миру пользовательских хуков React, открывая для себя их огромный потенциал для улучшения ваших проектов. Сегодня мы сосредоточимся на хуке useRenderCount, одном из многих тщательно разработанных хуков, доступных в коллекции пользовательских хуков React. Ссылка #react

JavaScript: структуры данных и алгоритмы. Часть 1 В этой серии статей мы будем разбирать структуры данных и алгоритмы, представленные в этом замечательном репозитории. Сегодня мы будем говорить о самых простых и популярных структурах данных: односвязном и двусвязном списках, стеке и очереди. Код, представленный в этой и других статьях серии, можно найти в этом репозитории. Ссылка #js

Решение задач Front End с интервью. Promise Pool Разбираем задачу Promise Pool (Leetcode 2636) Дан массив асинхронных функций functions и максимальный размер пула n. Необходимо написать асинхронную функцию promisePool. Она должна возвращать Promise, который разрешается, когда разрешаются все входные функции function. Ссылка #js

Решение задач Front End с интервью. Throttle Задача на реализацию Throttling часто дается на интервью по front end разработке. Давайте реализуем функцию throttle, которая принимает функцию callback и время ожидания. Вызов throttle() должен возвращать новую функцию, которая будет вызывать внутри себя callback функцию. Ссылка #js

Пояснение к ответу Object.entries(person) возвращает массив вложенных массивов, содержащий ключи и значения: [ [ 'name', 'John' ], [ 'age', 30 ] ]. С помощью цикла for-of мы перебираем элементы массива - в данном случае подмассивы. Мы можем деструктурировать подмассивы в цикле, используя const [x, y]. x равняется первому элементу в подмассиве, y - второму. Первым подмассивом является [ "name", "John" ], где x равняется name, а y - John. Вторым подмассивом является [ "age", 30 ], где x равняется age, а y - 30.

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

const MyComponent = React.memo(function MyComponent(props) {
  // Component logic
});

2. Правильное использование useMemo и useCallback Эти хуки помогают предотвратить выполнение тяжелых вычислений или создание функций при каждом рендере. useMemo мемоизирует значение:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useCallback мемоизирует функцию:

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

3. Разделение кода (Code Splitting) Разделение кода позволяет загружать только необходимые части приложения. Это можно сделать с помощью React.lazy и Suspense.

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

function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </Suspense>
  );
}

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

import(/* webpackChunkName: "moduleA" */ './moduleA').then(module => {
  // Использование модуля
});

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

// Вместо этого:
<MyComponent onClick={() => doSomething()} />

// Используйте:
const handleClick = useCallback(() => doSomething(), []);
<MyComponent onClick={handleClick} />

6. Оптимизация рендеров с помощью shouldComponentUpdate и PureComponent Для классовых компонентов можно переопределить shouldComponentUpdate или использовать PureComponent, который автоматически выполняет поверхностное сравнение пропсов и состояния.

class MyComponent extends React.PureComponent {
  render() {
    return <div>{this.props.value}</div>;
  }
}

7. Избегание большого количества состояний и контекста Старайтесь не создавать много состояний на уровне компонентов. Вместо этого объединяйте связанные состояния в одно, чтобы уменьшить количество рендеров.

const [state, setState] = useState({
  name: '',
  age: 0,
  address: ''
});

// Изменение состояния:
setState(prevState => ({ ...prevState, name: 'John' }));

8. Профилирование и анализ производительности Используйте инструменты, такие как React Profiler, для анализа производительности вашего приложения и выявления узких мест. 9. Оптимизация загрузки изображений Загружайте изображения асинхронно и используйте техники, такие как lazy loading для изображений, чтобы не блокировать рендеринг. 10. Использование производительных библиотек и инструментов Используйте проверенные и оптимизированные библиотеки, такие как react-window или react-virtualized для рендеринга больших списков. Эти принципы и техники помогут вам создать более производительные и отзывчивые приложения на React.

await vs yield на примере Effection 3.0 и React 18 декабря 2023 года вышел релиз Effection 3.0 - типизированная альтернативна async/await на генераторах (Structured Concurrency and Effects for JavaScript). В статье сравним подходы на генераторах и async/await и расскажу как использовать Effection в React для решения типичных проблем с асинхронным кодом: - Race condition - AbortController - Clean up - Debounce Ссылка #статьи

React.js: Знакомимся с useReducer, Axios и JSON Server на примере создания инвентарного списка Независимо от того, как вы относитесь к React, создавать что-либо с его помощью — это настоящее удовольствие, и с этим трудно не согласиться. Поэтому сегодня я решил создать простой инвентарный список, чтобы объяснить несколько мощных концепций, таких как сложное управление состояниями с помощью useReducer. А также между делом мы создадим мок API сервера с помощью JSON Server, будем использовать axios для вызова API и, наконец, воспользуемся хуком useReducer для управления состоянием. Ссылка #react

Новые функции CSS (mod, round) или как сделать анимированные Sprite Sheet без JS Sprite Sheet — это техника в веб-разработке, позволяющая использовать множество различных кадров анимации, хранящихся в одном изображении. Это эффективный способ уменьшить количество HTTP-запросов к серверу и ускорить загрузку веб-страницы, так как все кадры анимации загружаются одновременно. Ссылка #css

Пояснение к ответу Метод push возвращает длину нового массива, а не сам массив. Устанавливая newList равным [1, 2, 3].push(4), мы устанавливаем newList равным 4. Затем мы пытаемся использовать метод push для newList. Поскольку newList является числом 4, мы не можем использовать push - выбрасывается исключение TypeError.