目录

编写简洁 React 代码的 10 个最佳实践

编写干净的 React 代码很重要,因为它反映了仔细和专注的心态。 当我们花时间编写干净、组织良好的代码时,我们就展示了对软件开发技术的承诺。 干净的代码证明我们重视工作质量,并愿意投入所需的时间和精力来创造真正卓越的东西。

为什么组织和编写干净的 React 代码很重要?

出于实际原因以及视觉影响,干净的代码组织在 React 中非常重要。 精心设计和组织良好的代码库可以在视觉上令人愉悦,使其更易于使用和理解。

当代码混乱无序时,可能很难理解不同的元素如何组合在一起形成最终产品。 这可能会导致处理代码的开发人员和将与应用程序交互的最终用户感到困惑。

同样,当代码干净且组织良好时,可以更轻松地查看不同元素之间的关系,了解它们如何组合在一起,并根据需要进行更改。

如何编写干净的 React 代码?

编写干净的代码对于使项目具有可读性、可扩展性和可维护性至关重要。 以下是编写干净 React 代码的十个最佳 React 技巧:

https://d2mk45aasx86xg.cloudfront.net/React_Tips_for_writing_clean_react_code_e90add0bfe.webp

使用有意义的组件名称

给出反映其功能的组件名称。 避免使用“Box”或“DoesTheThing”等通用名称。 有意义的名称使人们更容易理解组件的功能及其在应用程序中的用途。 清晰简洁的组件名称可以减轻开发人员的认知负担,从而更轻松地导航和维护代码库。

当与多个开发人员一起开发项目时,清晰且有意义的组件名称可以帮助每个人理解代码并更有效地协作。 如果一个组件根据其用途来命名,将来会更容易维护、重构或修改。 此外,当您为组件指定一个有意义的名称时,它有助于在调试时轻松地在代码库中找到该组件。

https://d2mk45aasx86xg.cloudfront.net/Best_Practices_for_Writing_Clean_React_Code_4daf1834e8.webp

分解组件

将复杂的组件分解为更小、更易于管理的组件可以更轻松地理解和维护代码。 较小的组件更容易在应用程序中重用,从而更容易维护和扩展代码库。 较小的组件也更容易理解,从而更容易修复错误和添加新功能。 同样,较小的组件更容易测试,从而更容易编写有效的单元测试并确保代码质量。 分解组件可以让您分离应用程序的关注点,并有助于管理和理解代码库。 它可以通过减少浏览器需要呈现或处理的代码量来帮助提高应用程序的性能。

https://d2mk45aasx86xg.cloudfront.net/writing_clean_React_Code_d6e3f477ab.webp

使用解构

解构 props 和 state 使代码更加简洁和可读。 您可以编写“const {title} = props”,而不是编写“props.title”。 它允许您以更简洁和可读的方式从对象或数组中提取值,从而减少需要编写的代码量。 解构可以通过显式声明您感兴趣的属性或元素来使代码更具可读性。

它还可以帮助防止在访问不存在的属性或元素时出现错误。 通过分析代码的哪些部分使用了哪些值,可以更轻松地重构代码,并且可以通过仅提取所需的值来简化在组件之间传递 props 的过程。

https://d2mk45aasx86xg.cloudfront.net/How_to_Write_Cleaner_React_Code_ae3e652825.webp

保持较小的组件

保持组件较小并专注于单一职责可以更轻松地测试和调试代码。 较小的组件更容易在应用程序中重用,从而更容易维护和扩展代码库。 它们更容易理解和维护,更容易修复错误和添加新功能。 较小的组件也更容易测试,从而更容易编写有效的单元测试并确保代码质量。 将组件分解为更小的部分可以让您分离应用程序的关注点,从而更轻松地管理和理解代码库。 较小的组件还可以通过减少浏览器需要呈现或处理的代码量来帮助提高应用程序的性能。

除了这些好处之外,保持组件较小还可以使协作变得更容易 通过降低各个组件的复杂性并允许进行更有针对性和更细致的讨论,与其他开发人员合作。

https://d2mk45aasx86xg.cloudfront.net/React_Clean_Code_Tips_ef12deed11.webp

使用prop-types

使用“prop-types”来记录和验证传递给组件的 props 类型有助于防止错误。 Prop 类型有助于确保将正确的数据类型传递到组件中,从而减少出现运行时错误的可能性。 Prop 类型充当组件的文档,明确每个组件需要什么类型的数据以及组件如何处理这些数据。 当不正确的数据类型传递到组件时,它们可以通过提供有用的错误消息来帮助识别代码问题。

使用 prop 类型可以明确每个组件需要哪些数据并减少对如何使用组件的困惑,从而有助于促进开发人员之间的协作。 使用 prop 类型可以降低运行时错误的可能性并使其更易于维护和可读,从而提高代码的整体质量。

https://d2mk45aasx86xg.cloudfront.net/Writing_Clean_Code_with_React_dd7ff8b5c3.webp

使用功能组件

尽可能使用函数式组件而不是类组件是明智的,因为函数式组件更易于阅读和编写。 函数组件通常比类组件更快、更高效,因为它们不需要构造函数或生命周期方法。

函数组件通常比类组件更简单、更容易阅读,因为它们也没有那么多的样板代码。 功能组件通常是无状态的,这意味着它们不维护自己的状态。 这使得它们更容易推理和测试。 它们是使用 React hook 的主要方式,它提供了管理状态和副作用的强大方法。 由于功能组件通常是无状态的,并且具有一组清晰的输入和输出,因此它们通常更容易推理和调试。

https://d2mk45aasx86xg.cloudfront.net/React_Clean_Code_d00554a928.webp

避免使用内联样式

使用 CSS 类而不是内联样式将表示与逻辑分开,并使维护和更新设计变得更容易。 将样式与组件逻辑分离可以改善关注点分离,从而更容易维护和修改代码。 通过将样式保存在单独的 CSS 文件中,可以更轻松地管理和维护代码库,尤其是在处理较大的应用程序时。

使用外部样式表或 CSS 模块可以更轻松地跨多个组件重用样式,从而减少代码重复量。 通过分离样式,可以更轻松地启用浏览器缓存,这有助于提高应用程序的性能。 通过明确区分样式和组件逻辑,可以更轻松地调试样式或组件逻辑出现的问题。

https://d2mk45aasx86xg.cloudfront.net/Important_Tips_to_Write_Clean_React_Code_15fe1ae4b6.webp

使用箭头函数

箭头函数使代码更加简洁,更易于阅读。 它们是用 JavaScript 编写函数的更好方法,可以生成更清晰、更易读的代码。 箭头函数自动绑定到父作用域,这在您需要访问父作用域的“this”关键字的情况下非常有用。 箭头函数无需使用 bind() 方法将“this”关键字绑定到组件的方法,这可以简化您的代码。 与传统函数相比,箭头函数可以提供更好的性能,因为它们不会创建新的词法范围。

https://d2mk45aasx86xg.cloudfront.net/Clean_Code_in_React_e546322925.webp

使用无状态组件

应尽可能使用无状态组件。 有状态组件更加复杂且难以推理。 无状态组件更容易重用和组合,因为它们只需根据通过 props 传递给它们的数据进行渲染。 它们也更容易测试,因为它们没有任何内部状态需要管理。 无状态组件通常也比有状态组件更快、更高效,因为它们不必管理自己的状态。 考虑到无状态组件的内部状态管理,它们也更容易扩展,并且可以在应用程序的不同部分轻松重用。

https://d2mk45aasx86xg.cloudfront.net/React_Best_Practices_0c433f936a.webp

使用扩展运算符

在 React 代码中使用扩展运算符 (…) 很重要,原因有几个,例如它允许您编写更短、更简洁的代码,尤其是在使用数组或对象时。 扩展运算符允许您创建新的 对象或数组而不修改原始数据,这是函数式编程的一个重要原则。 它允许您轻松地将属性从一个对象复制到另一个对象,这在更新组件状态时非常有用。 扩展运算符允许您合并对象,这在处理复杂的数据结构时非常有用。 或者最聪明的是,扩展运算符也可以用于将 props 传播到子组件,从而减少需要编写的样板代码量。

https://d2mk45aasx86xg.cloudfront.net/Right_Way_to_Write_React_clean_code_e5f46fe26b.webp

结论

程序员在编写代码时必须考虑道德规范,因为他们创建的软件可能会产生重大影响。 例如,医疗保健或交通中使用的软件可能会产生生死攸关的后果,而社交媒体中使用的软件可能会影响公众舆论和行为。 因此,编码人员必须考虑其代码的潜在后果,并确保其设计符合道德和负责任。

道德考虑在编写干净的代码中起着关键作用,因为干净的代码是高效的、可维护的、道德的和负责任的。 干净的代码遵循行业最佳实践和编码标准,但也考虑到对用户的潜在影响。 例如,干净的代码确保用户数据受到保护,代码安全并且没有漏洞,并且代码不会造成不必要的进一步熵。 最终,道德考虑是编写干净代码的一个重要方面,因为它们确保代码不仅有效,而且符合道德和负责任。