Чистые компоненты в React

год назад·2 мин. на чтение

В этой статье рассмотрим чистые компоненты в функциональных компонентах ReactJS.

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

React.memo

React.memo — это компонент высшего порядка (higher-order component, HOC). Когда компонент отображает тот же вывод при одних и тех же пропсах, вы можете обернуть свой функциональный компонент этой функцией React.memo. За счет этого улучшится производительность и оптимизируется рендеринг. React.memo работает только при изменении пропсов компонента. Это означает, что если вы используете состояние, используя хук useState, то для каждого изменения состояния он будет ререндерить компонент. С React.memo выполняется поверхностное сравнение пропсов.
Рассмотрим компонент CustomLabel и Counter, внутри которого используется CustomLabel.
// CustomLabel.jsx

import React from "react";

export const CustomLabel = ({ name }) => {
  return (
    <>
      {console.log("CustomLabel component render")}
      <label>
        <b>{name}</b>
      </label>
    </>
  );
};
// Counter.jsx

import React, { useState } from "react";
import CustomLabel from "./CustomLabel";

export const Counter = () => {
  const [counter, setCounter] = useState(0);

  return (
    <div>
      <CustomLabel name="Simple Counter app" />
      <p>Counter is: {counter}</p>
      <button onClick={() => setCounter(counter + 1)}>Click</button>
    </div>
  );
};
Компонент CustomLabel принимает name в качестве пропса и отображает его в теге label. В компонент CustomLabel мы добавили console.log(), чтобы мы могли видеть, сколько раз компонент ререндерится. Всякий раз, когда вы нажимаете кнопку, чтобы увеличить счетчик, он повторно рендерит компонент CustomLabel.
Теперь поработаем с React.memo. Обернем компонент CustomLabel в React.memo и снова будем нажимать счетчик. Увидим, что он отрендерил компонент CustomLabel только один раз, потому что проп name остается неизменным при каждом нажатии кнопки.
// CustomLabel.jsx

import React, {memo} from "react";

export const CustomLabel = memo(({ name }) => {
  return (
    <>
      {console.log("CustomLabel component render")}
      <label>
        <b>{name}</b>
      </label>
    </>
  );
});
Чистые компоненты названы так по аналогии с чистыми функциями.

Что такое чистые функции?

В Javascript функции, которые возвращают один и тот же вывод при одних и тех же входных данных, называются чистыми функциями. Таким образом, результат чистой функции зависит только от ее входных аргументов. Чистые функции также не вызывают никаких побочных эффектов. Рассмотрим чистую функцию add.
function Add(num1, num2){
  return num1 + num2;
}
Если мы вызовем вышеуказанную функцию add(2,2), она всегда будет возвращать 4. Если вызвать ее несколько раз с параметрами 2 и 2, она всегда будет возвращать 4. Благодаря тому что функция чистая можно оптимизировать и улучшить производительность приложения. Еще подробнее о чистых функциях можно прочитать в статье Чистые функции. Функциональное программирование.

Продвинутое использование функций обратного вызова в React

год назад·4 мин. на чтение

В этой статье мы рассмотрим некоторые продвинутые функций обратного вызова (колбэк функции) в React, которые помогут вам создавать более эффективные и отзывчивые приложения. В частности, мы рассмотрим мемоизацию, debounce и throttle, а также разберем реальные примеры реализации этих методов в вашем коде.

Продвинутое использование функций обратного вызова являются неотъемлемой частью создания производительных и масштабируемых приложений, и это особенно актуально в разработке React приложений. Senior React разработчику важно иметь глубокое понимание продвинутых практик и того, как эффективно применять их в приложениях React. К концу этой статьи вы будете иметь четкое представление об этих передовых методах обратного вызова и сможете использовать их в своих собственных приложениях React для повышения производительности и пользовательского опыта.

Что такое функции обратного вызова (callback, колбэк)?

Функция обратного вызова — это функция, которая передается в качестве аргумента другой функции и выполняется позже. Обратные вызовы используются для обработки асинхронного кода, например ожидания извлечения данных с сервера или обработки событий пользовательского ввода. В React обратные вызовы широко используются для обработки взаимодействия с пользователем и обновления состояния приложения. Например, когда пользователь нажимает кнопку, запускается функция обратного вызова для обработки события клика и соответствующего обновления состояния приложения.

Пример простой функции обратного вызова

Вот базовый пример использования обратного вызова в React:
import React from 'react';

class MyComponent extends React.Component {
  handleClick() {
    console.log('Button clicked');
  }
  render() {
    return (
      <button onClick={this.handleClick}>Click me</button>
    );
  }
}
В этом примере мы создадим класс MyComponent, который расширяет класс React.Component. Мы определяем метод handleClick, который пишет сообщение в консоли при нажатии кнопки. Затем мы рендерим элемент button с атрибутом onClick, который задается методом handleClick. Этот пример представляет собой простую демонстрацию того, как обратные вызовы могут использоваться в React для обработки взаимодействий с пользователем.

Продвинутые функции обратного вызова

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

Мемоизация (memoization)

Мемоизация — это метод, используемый для оптимизации производительности функции путем кэширования ее результатов на основе входных параметров. Это может помочь уменьшить количество вызовов функции и повысить производительность приложения. В React запоминание можно использовать для оптимизации производительности компонентов, которые часто повторно рендерятся. Кэшируя результаты функции, мы можем избежать дорогостоящих вычислений, которые повторяются каждый раз при повторном рендеринге компонента. Вот пример того, как использовать мемоизацию в React:
import React, { useMemo } from 'react';

function MyComponent(props) {
  const result = useMemo(() => {
    // Дорогостоящее вычисление
    return props.data.map(item => item * 2);
  }, [props.data]);
  return (
    <div>{result}</div>
  );
}
В этом примере мы используем хук useMemo для запоминания результата дорогостоящих вычислений. Хук принимает два аргумента: функцию, которая выполняет дорогостоящие вычисления, и массив зависимостей, которые запускают вычисления при их изменении. Используя хук useMemo, мы можем избежать дорогостоящих вычислений, когда массив props.data не изменяется.

Debounce

Debounce — это метод, используемый для предотвращения вызова функции несколько раз за короткий период времени. Это может помочь повысить производительность приложения и уменьшить количество ненужных вызовов функции. В React debounce можно использовать для обработки событий пользовательского ввода, таких как ввод в поле поиска. Применяя debounce для функции, которая обрабатывает событие ввода, мы можем избежать ненужных вызовов функции и повысить производительность приложения. Вот пример того, как использовать отмену в React:
import React, { useState, useEffect } from 'react';
import debounce from 'lodash.debounce';

function MyComponent() {
  const [searchQuery, setSearchQuery] = useState('');
  useEffect(() => {
    const debouncedSearch = debounce(handleSearch, 500);
    document.addEventListener('keyup', debouncedSearch);
    return () => {
      document.removeEventListener('keyup', debouncedSearch);
    };
  }, []);

function handleSearch() { // Имитация вызова API
  console.log('Searching for:', searchQuery);
}

function handleChange(event) {
  setSearchQuery(event.target.value);
}

  return (
    <div>
      <input
        type="text"
        onChange={handleChange}
      />
    </div>
  );
}
В этом примере мы используем библиотеку lodash.debounce для отмены debounce’а функции handleSearch. Мы добавляем прослушиватель событий к объекту документа для события keyup, которое запускает функцию с debounce’ом. Мы также удаляем прослушиватель событий при размонтировании компонента, чтобы избежать утечек памяти. Применив debounce к функции handleSearch, мы можем предотвратить ее многократный вызов за короткий промежуток времени, что может помочь повысить производительность приложения.

Throttle

Throttle — это метод, используемый для ограничения количества вызовов функции за заданный период времени. Это может помочь повысить производительность приложения и уменьшить количество ненужных вызовов функции. В React throttle можно использовать для обработки событий пользовательского ввода, таких как прокрутка или изменение размера окна. Регулируя функцию, обрабатывающую входное событие, мы можем избежать ненужных вызовов функции и повысить производительность приложения. Вот пример использования throttle в React:
import React, { useState, useEffect } from 'react';
import throttle from 'lodash.throttle';

function MyComponent() {
  const [scrollPosition, setScrollPosition] = useState(0);
  useEffect(() => {
    const throttledScroll = throttle(handleScroll, 500);
    window.addEventListener('scroll', throttledScroll);
    return () => {
      window.removeEventListener('scroll', throttledScroll);
    };
  }, []);

  function handleScroll() {
    const position = window.pageYOffset;
    setScrollPosition(position);
  }

  return (
    <div>
      <p>Scroll position: {scrollPosition}</p>
      <div style={{ height: '2000px' }}>
        Content here
      </div>
    </div>
  );
};
В этом примере мы используем библиотеку lodash.throttle для throttle'а функции handleScroll. Мы добавляем прослушиватель событий к объекту окна для события scroll, которое запускает функцию регулирования. Мы также удаляем прослушиватель событий при размонтировании компонента, чтобы избежать утечек памяти. Применив throttle на функцию handleScroll, мы можем ограничить количество вызовов за заданный период времени, что может помочь повысить производительность приложения.

Итоги

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