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

Метод 1: именованный экспорт
Именованный экспорт позволяет нам экспортировать несколько функций из модуля. Каждая функция экспортируется индивидуально и может быть импортирована под своим именем в другие файлы.

// functions.js
export function add(a, b) {
  return a + b;
}
export function subtract(a, b) {
  return a - b;
}

// App.js
import { add, subtract } from './functions';
console.log(add(5, 3)); // Output: 8
console.log(subtract(5, 3)); // Output: 2

Метод 2: экспорт по умолчанию с объектом
Другой подход — использовать экспорт по умолчанию с объектом, содержащим все функции. Это позволяет нам импортировать их вместе, используя один оператор импорта.

// functions.js
const add = (a, b) => {
  return a + b;
};
const subtract = (a, b) => {
  return a - b;
};
export default {
  add,
  subtract,
};

// App.js
import functions from './functions';
console.log(functions.add(5, 3)); // Output: 8
console.log(functions.subtract(5, 3)); // Output: 2

Метод 3: экспорт функций в конце
При этом подходе мы определяем все функции внутри модуля и экспортируем их вместе в конце файла.

// functions.js
const add = (a, b) => {
  return a + b;
};
const subtract = (a, b) => {
  return a - b;
};
// Export all functions at the end
export { add, subtract };

// App.js
import { add, subtract } from './functions';
console.log(add(5, 3)); // Output: 8
console.log(subtract(5, 3)); // Output: 2

Метод 4: экспорт функций как псевдонимов
В некоторых случаях вам может потребоваться экспортировать функции с именами, отличными от их исходных. Этого можно добиться с помощью ключевого слова as.

// functions.js
export { add as sum, subtract as difference };
// App.js
import { sum, difference } from './functions';
console.log(sum(5, 3)); // Output: 8
console.log(difference(5, 3)); // Output: 2

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

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