[译]提升你react和js编码的5个技巧

程序源代码

共 1304字,需浏览 3分钟

 ·

2020-09-22 16:37

原文地址:https://dev.to/adancarrasco/5-tips-to-improve-your-react-and-js-code-32g7

原文作者:Adán Carrasco

译者:花花小仙女

为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。转载请联系作者。

两周前,我开始做一个新项目,有些代码已经写好了。然而,没有最佳实践可遵循。当你开始做一个新项目时,重要的是一起定义基础和最佳实践/指南,团队将遵循此基础来编写最佳代码:可维护,易读,易于理解。

我将描述我在项目中看到的5种情况以及如何改进它们。

关键字:一致

1.导入模块的顺序

以有组织的方式引入ES6模块将节省你查找任何找不到或不需要模块的时间。

之前

之后

之前的引入是无序的,一个文件可能不会太乱,但是当你打开大量文件时候,尝试找到一个特定的包真的很难。我们团队达成一致,使用之后一种方式对导入的包进行分组,通过空格行分割每个模块。因为文件将保持一致,就可以删除注释了。

2.尽可能使用解构

另外一个重要的事情就是防止不必要的嵌套和重复。在大多数情况下,将大大提升可读性。

之前

之后

3.变量和方法的命名约定

关于代码,有一点很重要,就是要知道一个方法将返回什么,或者通过变量名轻松理解变量的含(变量语义化,比如

之前

之后

之后展示了如何在命名变量和方法保持一致性,在以下方面保持一致:

  • 对于布尔类型使用:is, has,should做前缀
  • 对于方法使用 get/set 做前缀如果是操作 props
  • 变量和方法都使用驼峰命名
4.为你的组件接收公共变量做好准备

之前

之后

之后,组件为注入一些公共变量做准备,比如style, className, key等等,使用展开操作,将一组公共属性传入容器。
5.哑组件(dumb components)让开发更简单
创建哑组件(dumb components)并且遵循单一职责原则(Single Responsibility Principle)可以让你轻松创建和贡献代码,并保持代码库的整洁。

之前

之后

哪些可能会导致问题?

在组件里添加业务逻辑( Business Logic )会让它变得很难维护,调试和测试。我的建议是让你的组件作为展示组件(presentational component)。这样,你可以独立出业务逻辑,然后专注于独立地测试该组件。前面的每个逻辑都混在一起。现在我们把每个职责分开,这样更容易测试和调试。

附加:如果你正在使用类型检查器,请让它发挥作用。

如果你的团队选择使用类型检查器,那么使用严格模式很重要,以确保它能发挥作用,来达到使用它的目的。

之前

之后

我并不是说这些规则适用于所有项目,但你的团队需要制定自己的并且达成统一。

你有哪些最佳实践/指南?


扫码关注公众号,订阅更多精彩内容。


“在看和转发”就是最大的支持
浏览 74
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报