Продвинутое использование функций обратного вызова в 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 на новый уровень и создавать удивительные приложения, которые впечатляют своих пользователей.

Что нужно знать о Redux - action/dispatch/reducer/store

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

В этой статье рассмотрим работу с Redux - его основные понятия, и как Redux работает с данными.

Redux - это стэйт менеджер для JS приложений. Он может работать не только в React приложениях. Просто так сложилось исторически, что они часто упоминаются вместе. Redux хранит состояние в дереве объектов внутри единого стора. Единственная возможность изменить состояние - отправить action. Action это объект, который описывает действие. Он как бы отвечает на вопрос "Что я хочу изменить в состоянии?".
// types.js
const ADD_TODO = "ADD_TODO"
// actions.js
import { ADD_TODO } from "./types.js"

export const addTodoAction = {
  type: ADD_TODO,
  payload: {
     id: 1,
     text: "Изучить Redux",
     done: false
   }
}
Далее action попадает в reducer, где описано как состояние должно быть изменено ("Как я хочу изменить состояние?").
//  todo-reducer.js
import { ADD_TODO } from "./types.js"

export const todoReducer = (state = [], action) => {
  switch (action.type) {
    case ADD_TODO: {
      const item = action.payload
      return [...state, item]
    }
    default:
      return state
  }
}

Для чего нужен Redux?

Redux и в целом любая другая система работы с состоянием нужна для контроля над состоянием. Веб приложения усложняются, добавляются новые фичи и контроль над приложением теряется. Становится сложно охватывать большой проект как единое целое. Становится cложно передавать изменения. Встроенными способами в React их приходилось бы передавать по цепочке от одного компонента в другой или через Context API. По дороге обновленное состояние может также влиять на другие компоненты и т.д. И такая бесконтрольность расползается по всему проекту и может послужить появлению новых багов и добавит сложность в отладке. Теряется прозрачность того что происходит.
Action’ы добавляют порядок в происходящие изменения. Action - это объект, и его можно залогировать и последовательно отслеживать как меняется состояние. Подытожив, можно вывести три принципа Redux:
  • Единственный источник правды - единый стор, который меняются и всегда содержит актуальные данные.
  • Состояние - только для чтения. Нельзя менять его напрямую - только через action’ы.
  • Изменения делаются только при помощи чистых функций.
  • Эти функции (редьюсеры) принимают в качестве аргумента старое состояние и возвращают обновленное состояние. И всегда при одних и тех же данных результат этих функций будет одинаков.

Понятия в Redux

Action

Action (экшн) - это источник данных в стор, Action включает тип и некоторую информацию (payload). Тип обычно имеет строковое значение. Он нужен чтобы reducer понимал какой action был отправлен. Далее к стору будет применен payload.

Reducer

Reducer (редьюсер) - это функция, которая определяет как должно меняться состояние в зависимости от аction’а. Редьюсеры должны быть чистым функциями - они должны вычислить следующее состояние и вернуть новый объект состояния. Никаких сайд эффектов, мутаций состояния, и вызовов API в редьюсере быть не должно.

Store

Store - объединяет аction’ы и редьюсеры
  • Хранит состояние приложения.
  • Предоставляет доступ к состоянию через getState.
  • Позволяет изменять состояние через dispatch.
  • Регистрирует подписчиков через subscribe.
Теперь когда мы знаем основные понятия сформулируем флоу - движение данных в Redux. Сначала вызываем функцию dispatch, передав в нее action.
// App.jsx
import { useDispatch } from "react-redux"
import { ADD_TODO } from "./types.js"

export default App() {
  const dispatch = useDispatch()
 
  const handleTodoAdd = () => {
    dispatch({
      type: ADD_TODO,
       payload: {
         id: 1,
         text: "Изучить Redux",
         done: false
       },
    })
  }

  return (
    <button type="button" onClick={handleTodoAdd}>Добавить todo</button>
  )
}
Далее Redux вызывает переданный в него редьюсер. В редьюсер отправляется два аргумента - текущее состояние (state) и action.
//  todo-reducer.js
import { ADD_TODO } from "./types.js"

export const todoReducer = (state = [], action) => {
  switch (action.type) {
    case ADD_TODO: {
      const item = action.payload
      return [...state, item]
    }
    default:
      return state
  }
}
Redux сохраняет весь объект, который вернулся из корневого редьюсера. Почему редьюсер - корневой? В Redux передается один редьюсер, но его можно разделить на несколько и собрать вместе при помощи combineReducers. Результатом этой функции будет корневой редьюсер. Обычно это делается, когда в приложении есть несколько модулей и есть смысл разделить большой редьюсер на несколько маленьких. Но для мелких приложений это совсем не обязательно.
// reducers.js
import { combineReducers } from "redux"
import { todoReducer } from "./todo-reducer"

export const rootReducer = combineReducers({
  todos: todoReducer,
})
Как уже упоминалось, Redux работает не только с ReactJS. Это универсальный инструмент. Однако для того чтобы использовать его в ReactJS нужен специальный байндинг, который ставится как отдельный пакет - react-redux.

Как подключить Redux к ReactJS проекту

Установить Redux с помощью команды.
npm i redux react-redux
Проинициализировать store и обернуть приложение тегом <Provider> c переданным в него объектом store.
// index.js
import React from "react"
import ReactDOM from "react-dom/client"

import { createStore } from "redux"
import { Provider } from "react-redux"

import App from "./App"
import { rootReducer } from "./reducers"

const store = createStore(rootReducer)

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);