Когда я должен использовать именованный импорт с перехватчиками React? - PullRequest
Новая
       24

Когда я должен использовать именованный импорт с перехватчиками React?

1 голос
/ 15 января 2020

Мне было интересно, стоит ли использовать комбинацию импорта по умолчанию и именованного импорта или придерживаться импорта по умолчанию при работе со сложным модулем, включающим перехватчики React.

Использование default and named imports, как показано ниже, 

import React, { Children, createRef, isValidElement, useCallback, useState } from 'react';

const [someBool, setBool] = useState(true);
useEffect(() => {...}, []);
useCallback(() => {...}, []);

const childRefs = Children.map(props.children, child => createRef());

if (isValidElement(child)) {...}

или default imports только так, как показано ниже. 

import React from 'react';

const [someBool, setBool] = React.useState(true);
React.useEffect(() => {...}, []);
React.useCallback(() => {...}, []);

const childRefs = React.Children.map(props.children, child => React.createRef());

if (React.isValidElement(child)) {...}

Я начал с именованного импорта и отлично работал, когда были только простые перехваты, но это стало уродливым, когда традиционные функции реагирования, такие как React.Children.map и Пришло React.createRef.

Каковы лучшие практики импорта модулей с помощью перехватчиков React?

1 Ответ

0 голосов
/ 15 января 2020

Решение чисто стилистическое c, и то, что вы выберете, не повлияет на ваше приложение. Тем не менее, JavaScript руководства по стилю do существуют и имеют достаточное использование, чтобы я чувствовал себя комфортно, обращаясь к ним для установления sh правил кодирования между вашими коллегами.

Руководство по Airbnb Stlye

В Airbnb нет правил для именованных и стандартных импортов. Их React Speci c правила также не имеют предпочтений. Стоит отметить, что в их примерах React используется импорт по умолчанию.

Руководство по стилю Google

Google вид приближается к topi c в их правилах экспорта .

3.4.2.1 Именованные против экспорта по умолчанию

Использовать именованные экспорты во всем коде , Вы можете применить ключевое слово export к объявлению или использовать синтаксис export {name};.

Не использовать экспорт по умолчанию. Импортирующие модули должны давать имя этим значениям, что может привести к несогласованности именования между модулями.

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

Реактивная документация

На странице документации "Краткий обзор зацепок" используется именованный импорт. Я думаю, что разумно предположить, что большая часть сообщества изучит его с помощью именованных импортов, а большая часть кода React будет использовать именованные импорты.

Лично я использую именованные импорты без особой причины. Я просто научился этому и не подверг сомнению. Моя кодовая база применяет правило стиля , ограничивающее максимальную длину строки , и я полагаю, что использование именованного импорта снижает вероятность того, что я нарушу это правило, что является как минимум небольшим выигрышем.

...