如何设计更优雅的 React 组件?

在日常开发中，团队中每个人组织代码的方式不尽相同。下面我们就从代码结构的角度来看看如何组织一个更加优雅的 React 组件。,我们通常会在组件文件顶部导入组件所需的依赖项。对于不同类别的依赖项，建议对它们进行分组，这有助于帮助我们更好的理解组件。可以将导入的依赖分为四类：,对导入依赖项进行手动分组可能比较麻烦，Prettier 可以帮助我们自动格式化代码。可以使用 prettier-plugin-sort-imports 插件来自动格式化依赖项导入。需要在项目根目录创建prettier.config.js配置文件，并在里面配置规则：,下面是该插件官方给出的例子，输入如下：,格式化之后的输出如下：,prettier-plugin-sort-imports：https://github.com/trivago/prettier-plugin-sort-imports,在导入依赖项的下方，通常会放那些使用 TypeScript 或 Flow 等静态类型检查器定义的文件级常量和类型定义。,组件中的所有 magic 值，例如字符串或者数字，都应该放在文件的顶部，导入依赖项的下方。由于这些都是静态常量，这意味着它们的值不会改变。因此将它们放在组件中是没有意义的，因为放在组件中的话，它们会在每次重新渲染组件时重新创建。,对于更复杂的静态数据结构，可以将其提取到一个单独的文件中，以保持组件代码整洁。,下面是使用 TypeScript 声明的组件 props 的类型：,如果这个 props 的类型不需要导出，可以使用 Props 作为接口名称，这样可以帮助我们立即识别组件 props 的类型定义，并将其与其他类型区分开。,只有当这个 Props 类型需要在多个组件中使用时，才需要添加组件名称，例如ButtonProps，因为它在导入另一个组件时，不应该与另一个组件的Props类型冲突。,定义函数组件的方式有两种：函数声明和箭头函数， 推荐使用函数声明的形式，因为这就是语法声明的内容：函数。官方文档的示例中也使用了这种方法：,只会在必须使用 forwardRef 时才使用箭头函数：,通常会在组件最后默认导出组件：,接下来，我们就需要在组件里面进行变量的声明。注意，即使使用 const 声明，这里也称为变量，因为它们的值通常会在不同的渲染之间发生变化，只有在执行单个渲染过程时是恒定的。,这里通常包含在组件级别使用的所有变量，使用 const 或 let 定义，具体取决于它们在渲染期间是否更改其值：,一些较大的组件可能需要在组件中声明很多变量。这种情况下，建议根据它们的初始化方法或者用途对它们进行分组：,变量分组的方法在不同组件之间可能会存在很大的差异，它取决于变量的数量和类型。关键是要将相关变量放在一起，在不同组之间添加一个空行来提高代码的可读性。,注：上面代码中的注释仅用于标注分组类型，在实际项目中不会写这些注释。,Effects 部分通常会写在变量声明之后，它们可能是React中最复杂的构造，但从语法的角度来看它们非常简单：,任何包含在effect之内但是在其外部定义的变量，都应该包含在依赖项的数组中。,除此之外，还应该使用return来清理副作用：,组件的核心就是它的内容，React 组件的内容使用 JSX 语法定义并在浏览器中呈现为 HTML。所以，推荐将函数组件的 return 语句尽可能靠近文件的顶部。其他一切都只是细节，它们应该放在文件较下的位置。,难道return不应该放在函数的最后吗?其实不然，对于常规函数，肯定是要将return放在最后的。然而，React组件并不是简单的函数，它们通常包含具有各种用途的嵌套函数，例如事件处理程序。最后的return语句以及前面的一堆其他函数，实际上阻碍了代码的阅读，使得很难找到组件渲染的内容：,当然，可以根据个人喜好来决定函数定义的位置。如果将函数放在return的下方，那么如果想要使用箭头函数来自定义函数，那就只能使用var来定义，因为let和const不存在变量提升，不能在定义的箭头函数之前使用它。,在处理大型 JSX 代码时，将某些内容块提取为单独的函数来渲染组件的一部分是很有帮助的，类似于将大型函数分解为多个较小的函数。,那为什么不将它们提取为组件呢?关于部分渲染函数其实是存在争议的，一种说法是要避免从组件内定义的任何函数中返回 JSX，另一种说法是将这些函数提取为单独的组件。,在这种情况下，就必须手动将子组件所需的局部变量通过props传递。在使用 TypeScript 时，我们还需要为组件的props定义额外的类型。最终代码就会变得臃肿，这就会导致代码变得难以阅读和理解：,这些单独的组件不可以重复使用，它们仅被它们所属的组件使用，单独使用它们是没有意义的。因此，这种情况下，还是建议将部分 JSX 提取成渲染函数。,React 组件通常会包含事件处理函数，它们是嵌套函数，通常会更改组件的内部状态或调度操作以更新组件的状态。,另一类嵌套函数就是闭包，它们是读取组件状态或props的不纯函数，用于构建组件逻辑。,最后就是纯函数，我们可以将它们放在组件文件的底部，在 React 组件之外：,首先，纯函数没有依赖项，如 props、状态或局部变量，它们接收所有依赖项作为参数。 这意味着可以将它们放在任何地方。 但是，将它们放在组件之外还有其他原因：,完整示例下面是一个完整的典型 React 组件示例。由于重点是文件的结构，因此省略了实现细节。,参考：https://andreipfeiffer.dev/blog/2021/react-components-anatomy