我什么时候应该使用带有 React 钩子的命名导入？答案

【问题标题】：When should I use named imports with React hooks?我什么时候应该使用带有 React 钩子的命名导入？
【发布时间】：2020-01-15 00:45:06
【问题描述】：

我想知道在处理涉及 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 钩子导入模块的最佳实践是什么？

【问题讨论】：

你更喜欢哪一个？使用那个。
我个人的经验法则是，如果您在给定文件中多次使用它，请使用命名导入。
自从钩子发布以来，我一直在使用命名导出。对于 TS 类型，虽然我倾向于使用 React.TypeName。这会产生一个丑陋的边界，因为React.ReactNode 看起来很奇怪，所以memo(Component) 而不是React.memo。在任何地方使用 React.stuff 可以用一个简单的代码库范围的规则替换模态，我可能会喜欢。也许，这就是假设事情可以在未来像通过 webpack 和 babel 插件为 lodash 所做的那样进行 tree-shaking 的方式？很想听听对此的想法。 DX 感觉可能更好React.stuff 尽管额外冗长。

标签： reactjs ecmascript-6 import react-hooks es6-modules

【解决方案1】：

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

Airbnb's Stlye Guide

Airbnb 没有指定导入与默认导入的规则。他们的React specific 规则也没有偏好。值得注意的是，他们的 React 示例使用默认导入。

Google's Style Guide

Google 有点在他们的rules about exporting 中处理了这个话题。

3.4.2.1 命名与默认导出

在所有代码中使用命名导出。您可以将export 关键字应用于声明，或使用export {name}; 语法。

不要使用默认导出。导入模块必须为这些值，这可能导致命名不一致模块。

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

React Documentation

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

就个人而言，我没有特别的原因使用命名导入。我就是这样学的，没有质疑。我的代码库强制执行style rule limiting the max line length，我想使用命名导入使我不太可能违反该规则，这至少是一个小胜利。

【讨论】：