CodeRoll | Frontend

Решение задач 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.

RxJs для самых маленьких В этой статье мы подробно рассмотрим такую библиотеку как RxJs. Разберем несколько простых примеров и поймем что такое поточность в программировании. Ссылка #статьи

Пояснение к ответу Классы являются синтаксическим сахаром для функций-конструкторов. Эквивалентом класса Person в качестве функции-конструктора будет function Person() { this.name = name }. Вызов функции-конструктора с ключевым словом new приводит к созданию нового экземпляра объекта Person. Выражение typeof member возвращает object.

Пояснение к ответу Значение ключевого слова this зависит от того, в каком контексте оно используется. В методе getStatus this указывает на объект, которому принадлежит метод. Метод принадлежит объекту data, поэтому this указывает на этот объект. Когда мы выводим в консоль this.status, выводится свойство status объекта data или 😉. С помощью метода call мы можем изменить объект, на который ссылается this (изменить контекст this). В функциях ключевое слово this относится к объекту, которому принадлежит функция, либо к объекту, создаваемому с помощью функции-конструктора. Мы объявили функцию setTimeout для объекта global, поэтому в функции setTimeout ключевое слово this указывает на объект global. В глобальном объекте есть переменная status со значением 😎, которое и выводится в консоль.

Пояснение к ответу Функция add является функцией запоминания (мемоизации). С помощью запоминания мы можем кешировать результаты вызова функции, чтобы ускорить ее повторное выполнение. В данном случае мы создаем объект cache для хранения возвращаемых функцией значений. Если мы повторно вызовем функцию addFunction с тем же аргументом, она сначала проверит, имеется ли соответствующее значение в кеше. Если такое значение имеется, оно возвращается, что экономит время на выполнение функции. Иначе, если значение в кеше отсутствует, оно вычисляется и сохраняется. Мы вызываем addFunction() 3 раза с одним и тем же аргументом: при первом вызове для num, равном 10, значение, возвращаемое функцией, в кеше отсутствует. Условие if (num in cache) возвращает false, и выполняется блок else: Вычислено! 20 выводится в консоль, а результат добавляется в объект cache. cache теперь выглядит как { 10: 20 }. При повторном вызове значение для аргумента 10 возвращается из кеша. Условие if (num in cache) возвращает true, и Из кеша! 20 выводится в консоль. В третий раз мы передаем в функцию выражение 5 * 2, что оценивается (вычисляется) как 10. Объект cache содержит искомое значение. Условие if (num in cache) возвращает true, и Из кеша! 20 выводится в консоль.