ReactJS 代码中需要检查哪些内容？

1. 组件

2. 螺旋桨和螺旋桨钻井

3. 各州

4. 风格方法的一致性

5. 文件扩展名的一致性

6. 语义化 HTML

7. Redux 之前的 Context API

8. 功能代码

9. 属性验证

10. 清理文件夹结构

11. 测试

12.避免过度设计

13. 生命周期之前的钩子

1. 组件

首先要检查 PR 中的一点是——“开发者是否遵循了 ReactJS 团队建议的‘ React 式思考’？”如果开发者没有破坏组件中的代码，那就标记出来。

例如：不要将Homepage.jsx页面作为一个整体组件来制作，而是将其拆分成多个组件。这项练习应该分两个层次进行：Application第一层级和page第二层级。

在应用层，识别可重用的（全局）组件；在页面层，重复相同的操作。

思考以下几个方面：可重用性、全局性和通用性组件。

代码示例

此外，还要确保开发人员没有把所有的业务逻辑都放在一个组件中。

2. 螺旋桨和螺旋桨钻井

作为 ReactJS 开发人员或 Web 开发人员，我们习惯于将内容或值硬编码到代码中。

ReactJS 的一个特性是props，它提供了灵活性以及对内容和值的控制。

所以，请检查哪些值可以移到 props 中？此外，props 还有助于组件之间的数据流。

但要谨慎使用“螺旋桨钻孔”功能。这可能会导致重新渲染，从而降低性能成本。

代码示例

3. 各州

ReactJS的另一个特点是states……。作为一名ReactJS初学者，在处理事件或应用程序的不同状态时，开发者常常会混淆在React还是JavaScript中管理状态，或者状态是属于UI还是APP。

作为 ReactJS 开发人员，你应该只通过 ReactJS 的方式来处理状态，而不是通过 JavaScript 的方式来处理。

另外，还要不断问：这个状态是用户界面状态还是应用程序状态？

如果是 UI 状态，则应在组件级别处理；如果是应用级别，则应将状态提升到父级别。

代码示例

4. 风格方法的一致性

React 的样式设置提供了多种选择，包括 CSS、SASS、Styled Components、CSS Modules 等。重要的是要遵循一种统一的样式设置方式。

如果开发者的样式设计没有一致性，请标记出来。

遵循一种代码风格。保持一致性对于编写简洁易维护的代码至关重要。

5. 文件扩展名的一致性

React 同时支持 JS 和 JSX 这两种扩展。为了保持一致性，你可以使用 JSX 或 JS 编写组件，并遵循相同的 reducer、Actions 等规则。

如果开发者的文件扩展名不一致，请标记出来。

文件扩展名的一致性对于项目的清晰架构至关重要。

6. 语义化 HTML

React 的 JSX 本质上仍然是 HTML。因此，编写语义化的 JSX（HTML）至关重要。为什么呢？因为Header.jsx (<Header />)它并不等同于 HTML 的头部标签。

因此，请检查 JSX 代码中是否编写了语义化代码。如果没有，请标记出来。

编写简洁且语义化的JSX（HTML）。请始终记住，JSX归根结底就是HTML。

代码示例

7. Redux 之前的 Context API

在开始 React 项目时，首先要评估项目的规模。如果项目规模较小，可以使用 Context API。对于大型应用，则应迁移到 MobX、Redux 等状态管理库。

如果开发者使用的是 Redux 或 MobX 这类可以使用 ContextAPI 的工具，那你应该知道该怎么做了 :)

根据项目范围从小规模开始，并根据需要扩大规模。

代码示例

8. 功能代码

在 ReactJS 中创建组件时，经常会看到所有代码都写在component同一个块内。ReactJS 的核心理念就是编写函数式代码。

将方法或函数从组件中移出。这不仅能将代码拆分成函数式代码，还能提高组件的可重用性。

代码示例

9. 属性验证

ReactJS开发者逐渐养成对静态属性进行验证的习惯。这将有助于开发者在开发过程中避免早期出现错误和问题。

通过使用属性验证，我们还可以指定哪些属性是必需的，默认值应该是什么，以及更多其他内容。

将 PropTypes、Flow 或 TypeScript 与 ReactJS 结合使用。

代码示例

10. 清理文件夹结构

Create React App (CRA) 是目前最流行的 React 项目启动方式。然而，大多数开发者在将项目部署到生产环境之前都会忘记清理文件夹。删除所有不必要的文件和文件夹至关重要。CRA 允许开发者自行设计架构，但我建议最好遵循大多数主流 React 开发者的实践经验。

11. 测试

这是 ReactJS 开发人员的另一个好习惯。可以从快照测试开始，然后逐步过渡到单元测试和端到端测试。记住，从长远来看，测试有很多好处。

您可以使用 Jest、Enzyme 或 React-Testing 库。

12.避免过度设计

避免“过度设计”，保持简单就好。

仔细分析问题，思考最简单的解决方案，而不是把它复杂化。此外，为了减少代码量，不要编写难以阅读的代码。记住，我们开发者是协作的，我们的代码应该易于阅读。

13. 生命周期之前的钩子

感谢 ReactJS 团队的 Hooks 功能。现在，我们无需将组件移至类或智能组件，即可保持组件的函数式特性并使用 Hooks。

这有助于提高性能，因为现在您将组件从类函数式编程迁移到了函数式编程。

代码审查愉快！

请在评论区分享一下你们的代码审查技巧 :)