Стандарт кодирования
Когда дело доходит до стандартов кодирования для React Native, важно следовать передовым методам, чтобы обеспечить удобочитаемость, ремонтопригодность и согласованность кода в рамках вашего проекта. Пока нет официального стандарта кодирования для React Native. Но вы можете принять общепринятые соглашения и рекомендации. Вот несколько рекомендаций:
Основные правила
- Всегда используйте
const
илиlet
для объявления переменных. Используйтеconst
по умолчанию, если переменная не нуждается в переназначении. - Всегда используйте функциональный компонент.
- Нет вложенных компонентов или getComponent внутри метода рендеринга. Всегда старайтесь разделить компоненты, если это возможно!
Именование
- PascalCase: это наиболее распространенное соглашение об именах для компонентов React Native. При этом первая буква каждого слова в имени делается заглавной.
- camelCase: это соглашение об именах менее распространено, чем PascalCase, но все же иногда используется. Он включает в себя заглавную первую букву первого слова в имени, а затем заглавную первую букву каждого последующего слова.
- CONSTANT_CASE: это соглашение об именах используется для определения глобальных констант и перечислений.
Пример:
// CONSTANT_CASE const PRIMARY_COLOR = '#FF0000'; const FONT_SIZE_LARGE = 18; const API_ENDPOINT = 'https://api.example.com'; // PascalCase & camelCase interface PascalCase { camelCase: string; }
Система типов
- Всегда следует определять тип как возможное.
any
тип ограничен в любом случае.
Интерфейс (TypeScript)
Интерфейс — это способ определить форму или структуру объекта.
Пример:
interface Person { name: string; age: number; }
Преимущества использования интерфейсов в TypeScript:
Безопасность типов: интерфейсы помогают обеспечить безопасность типов кода TypeScript. Это означает, что вы можете быть уверены, что объекты имеют правильный тип и что методы вызываются с правильными параметрами.
Повторное использование: интерфейсы можно использовать для повторного использования кода. Определив структуру объекта в интерфейсе, вы можете повторно использовать эту структуру в нескольких классах.
Ясность: интерфейсы могут помочь улучшить ясность вашего кода. Определив структуру объекта в интерфейсе, вы можете упростить понимание того, как используются объекты.
Исходная организация
Импорт
- По возможности используйте абсолютный путь.
- Использовать относительный путь при обращении к файлам в одном и том же расположении
Экспорт
- Предпочитайте использование области файлов для пространства имен, а также именованного экспорта.
- Используйте то же имя при импорте модуля по умолчанию.
Стили
- Максимально используйте базовые стили.
const baseStyle = StyleSheet.create({ flex: { flex: 1, }, justifyContentCenter: { justifyContent: 'center', }, centralize: { justifyContent: 'center', alignItems: 'center', }, p4: { padding: 4, }, m8: { margin: 8, }, });
- Всегда создавайте отдельные файлы стилей при создании нового компонента.
const styles = StyleSheet.create({ width: { width: 16 }, height: { height: 16, }, successMessage: { fontFamily: 'Inter-Medium', color: 'green' }, errorMessage: { fontFamily: 'Inter-Regular', color: 'red' }, textAlignCenter: { textAlign: 'center', }, }); export default styles;
- Не используйте встроенные стили. Всегда используйте
StyleSheet
для создания объекта стилей.
// No inline style <Text style={{ fontSize: 16, color: 'red' }}>Hello, React Native!</Text>
Последовательность
- Рассмотрите возможность использования
arrow function
при объявлении функции вместо традиционной функции. - Функции стрелок можно использовать для различных целей, включая обработчики событий, функциональные компоненты и многое другое.
Пример:
// Event Handlers <Button onPress={() => console.log('Button clicked!')} title="Click me" /> // functional components const MyComponent = () => { return <Text>Hello, React Native!</Text>; };
API хуков
- использоватьобратный вызов
- useMemo
- Следует использовать, когда необходимо запомнить предыдущую функцию/значение.
- Используйте его, только если объявление функции/значения имеет зависимость изменено.
Пример:
// Bad const FooComponent = () => { const onPress = () => { // onPress is newly created in every render instead of reusing the previous one }; return <Bar onPress={onPress} /> } // Good const FooComponent = ({a, b}) => { const onPress = useCallback(() => { // onPress is reused if a & b don't change. },[a, b]); return <Bar onPress={onPress} /> }
Селекторы
- Попробуйте использовать селектор для выбора значения в состоянии сокращения.
Пример:
function TodoList() { // This anonymous arrow function is a selector! const todos = useSelector(state => state.todos) }
Структура папок
src
: Эта папка является основным контейнером всего кода вашего приложения.components
: папка для хранения любых общих компонентов, которые вы используете в своем приложении (например, общая кнопка).screens
: Папка, содержащая все экраны/функции вашего приложения.navigations
: Папка для хранения навигаторов.services
: Папка для хранения всех общих служб, используемых в приложении.utils
: Папка для хранения любых общих функций, таких как вычисление радиуса, различные функции форматирования даты и константы.types
: Папка для хранения всех перечислений и интерфейсов, используемых в приложении.redux
: Папка для хранения действий, редукторов и редуктов.App.js
: Основной компонент, запускающий все ваше приложение.index.js
: Точка входа вашего приложения в соответствии со стандартами React-Native.assets
: Папка активов для хранения всех изображений, векторов, шрифтов и т. д.
Измените файлы переменных среды в корневой папке (.env
)
Пример:
Заключение
Следование единым стандартам кодирования и передовым методам разработки React Native может значительно улучшить качество кода, удобство сопровождения и сотрудничество между разработчиками. Используя методы, упомянутые в этом блоге, вы сможете создавать масштабируемые и надежные приложения React Native.
Надеюсь, что этот пост в блоге содержит полезное руководство, которое поможет вам установить стандарты кодирования и структуру проекта для ваших проектов React Native.