reactjs - 我什么时候应该将命名导入与 React hooks 一起使用？

Question

我想知道在处理涉及 React hooks 的复杂模块时是否应该使用默认导入和命名导入的组合，或者坚持使用默认导入。

使用默认和命名导入，如下所示，

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)) {...}

或默认导入仅如下所示。

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)) {...}

我从命名导入开始，当只有简单的钩子(Hook)时，效果很好，但当像 React.Children.map 和 React.createRef 这样的传统 React 函数时，它就变得丑陋了> 进来了。

使用 React hooks 导入模块的最佳实践是什么？

Answer 1

该决定纯粹是风格上的，您的选择不会对您的申请产生影响。也就是说，JavaScript 样式指南确实存在并且有足够的用途，我很乐意引用它们来在同事之间建立编码指南。

Airbnb's Stlye Guide

Airbnb 没有关于命名导入和默认导入的规则。他们的React specific规则也没有偏好。值得注意的是，他们的 React 示例使用默认导入。

Google's Style Guide

Google 在其 rules about exporting 中有点接​​近这个主题。 .

3.4.2.1 Named vs default exports

Use named exports in all code. You can apply the export keyword to a declaration, or use the export {name}; syntax.

Do not use default exports. Importing modules must give a name to these values, which can lead to inconsistencies in naming across modules.

此规则要求必须使用命名导出来导出代码，这将导致在整个代码库中使用命名导入。他们没有关于导入模块的规则，但有人可能会说，如果您选择遵循这一规则，为 React 使用命名导入看起来会与代码库的其余部分更加一致。

React Documentation

“Hooks 概览”文档页面使用命名导入。我认为可以合理地假设大多数社区将通过命名导入来学习它，并且大多数 React 代码将使用命名导入。

---

就我个人而言，我使用命名导入没有特殊原因。我只是这样了解到的，并没有质疑它。我的代码库强制执行 style rule limiting the max line length ，而且我认为使用命名导入可以降低我违反该规则的可能性，这至少是一个小小的胜利。