译：101个React技巧#4组织React代码类别 #4: 组织 React 代码 🧩 24. 将 React 组件

24. 将 React 组件与其资源（如样式、图片等）放在一起

始终将每个 React 组件与相关资源（如样式和图片）放在一起。

这样在组件不再需要时更容易删除它们。
同时也简化了代码导航，因为所有需要的内容都在一个地方。

25. 限制组件文件大小

包含大量组件和导出的庞大文件会让人困惑。

此外，随着更多内容的添加，它们往往会变得更大。

因此，应追求合理的文件大小，并在有意义时将组件拆分为单独的文件。

26. 限制函数组件文件中的 return 语句数量

函数组件中的多个 return 语句会使组件返回的内容难以看清。

在类组件中这不是问题，因为我们可以搜索 render 关键字。

一个方便的技巧是尽可能使用不带大括号的箭头函数（VSCode 有这个功能 😀）。

❌ 不好： 更难发现组件的 return 语句

function Dashboard({ posts, searchTerm, onPostSelect }) {
  const filteredPosts = posts.filter((post) => {
    return post.title.includes(searchTerm);
  });
  const createPostSelectHandler = (post) => {
    return () => {
      onPostSelect(post.id);
    };
  };
  return (
    <>
      <h1>Posts</h1>
      <ul>
        {filteredPosts.map((post) => {
          return (
            <li key={post.id} onClick={createPostSelectHandler(post)}>
              {post.title}
            </li>
          );
        })}
      </ul>
    </>
  );
}

✅ 好： 组件只有一个 return 语句

function Dashboard({ posts, searchTerm, onPostSelect, selectedPostId }) {
  const filteredPosts = posts.filter((post) => post.title.includes(searchTerm));
  const createPostSelectHandler = (post) => () => {
    onPostSelect(post.id);
  };
  return (
    <>
      <h1>Posts</h1>
      <ul>
        {filteredPosts.map((post) => (
          <li
            key={post.id}
            onClick={createPostSelectHandler(post)}
            style={{ color: post.id === selectedPostId ? "red" : "black" }}
          >
            {post.title}
          </li>
        ))}
      </ul>
    </>
  );
}

27. 优先使用命名导出而非默认导出

我看到到处都是默认导出，这让我感到难过 🥲。

让我们比较这两种方法：

/// `Dashboard` 作为默认组件导出
export default function Dashboard(props) {
 /// TODO
}

/// `Dashboard` 作为命名导出
export function Dashboard(props) {
 /// TODO
}

我们现在这样导入组件：

/// 默认导出
import Dashboard from "/path/to/Dashboard"


/// 命名导出
import { Dashboard } from "/path/to/Dashboard"

默认导出存在的问题：

如果组件被重命名，IDE 不会自动重命名导出。

例如，如果 Dashboard 被重命名为 Console，我们将得到：

/// 在默认导出的情况下，名称不会改变
import Dashboard from "/path/to/Console"


/// 在命名导出的情况下，名称会改变
import { Console } from "/path/to/Console"

更难看出文件中导出了什么。

例如，在命名导入的情况下，一旦我输入 import { } from "/path/to/file"，当我把光标放在大括号内时，我会得到自动补全。

默认导出更难重新导出。

例如，如果我想从 index 文件重新导出 Dashboard 组件，我必须这样做：

export { default as Dashboard } from "/path/to/Dashboard"

而命名导出的解决方案更简单：

export { Dashboard } from "/path/to/Dashboard"

因此，请默认使用命名导出 🙏。

💡 注意：即使你使用 React 的 lazy 功能，你仍然可以使用命名导出。参见示例这里。