专栏首页java一日一条如何写出漂亮的 React 组件

如何写出漂亮的 React 组件

Walmart Labs的产品开发中,我们进行了大量的Code Review工作,这也保证了我有机会从很多优秀的工程师的代码中学习他们的代码风格与样式。在这篇博文里我会分享出我最欣赏的五种组件模式与代码片。不过我首先还是要谈谈为什么我们需要执着于提高代码的阅读体验。就好像你有很多种方式去装扮一只猫,如果你把你的爱猫装扮成了如下这样子:

你或许可以认为萝卜青菜各有所爱,但是代码本身是应当保证其可读性,特别是在一个团队中,你的代码是注定要被其他人阅读的。电脑是不会在意这些的,不管你朝它们扔过去什么,它们都会老老实实的解释,但是你的队友们可不会这样,他们会把丑陋的代码扔回到你的脸上。而所谓的Pretty Components,应该包含如下的特性:

  • 即使没有任何注释的情况下也易于理解
  • 比乱麻般的代码有更好的性能表现
  • 更易于进行Bug追溯
  • 简洁明了,一句顶一万句

SFC:Stateless Functional Component

我觉得我们在开发中经常忽略掉的一个模式就是所谓的Stateless Functional Component,不过这是我个人最爱的React组件优化模式,没有之一。我喜爱这种模式不仅仅因为它们能够减少大量的模板代码,而且因为它们能够有效地提高组件的性能表现。总而言之,SFC能够让你的应用跑的更快,长的更帅。

直观来看,SFC就是指那些仅有一个渲染函数的组件,不过这简单的改变就可以避免很多的无意义的检测与内存分配。下面我们来看一个实践的例子来看下SFC的具体作用,譬如:

如果我们用正统的React组件的写法,可以得出如下代码:

而使用SFC模式的话,大概可以省下29%的代码:

代码量的减少主要来源两个方面:

  • 没有构造函数(5行)
  • 以Arrow Function的方式替代Render语句(4行)

实际上,SFC最迷人的地方不仅仅是其代码量的减少,还有就是对于可读性的提高。SFC模式本身就是所谓纯组件的一种最佳实践范式,而移除了构造函数并且将_handleClick()这个点击事件回调函数提取出组件外,可以使JSX代码变得更加纯粹。另一个不错的地方就是SFC以Arrow Function的方式来定义了输入的Props变量,即以Object Destructring语法来声明组件所依赖的Props:

这样不仅能够使组件的Props更加清晰明确,还能够避免冗余的this.props表达式,从而使代码的可读性更好。

最后,我还想要强调下虽然我很推崇SFC,不过也不能滥用它。最合适使用SFC的地方就是之前你用纯组件的地方。在Walmart Labs中,我们使用Redux来管理应用的状态,也就意味着我们绝大部分的组件都是纯组件,也就给了SFC广阔的应用空间。一般来说,有以下特征的组件式绝对不适合使用SFC的:

  • 需要自定义整个组件的生命周期管理
  • 需要使用到refs

Conditional Components

JSX本身不支持if表达式,不过我们可以使用逻辑表达式的方式来避免将代码切分到不同的子模块中,大概是如下样子:

这种表达式在二选一渲染的时候很有效果,不过对于选择性渲染一个的情况很不友好,譬如如下的情况:

这样子确实能起作用,不过看上去感觉怪怪的。我们可以选用另一种更加语义化与友好的方式来实现这个功能,即使用逻辑与表达式然后返回组件:

不过这一点也是见仁见智,每个人按照自己的喜好来就行了。

Arrow Syntax In React And Redux

ES2015里包含了不少可口的语法糖,我最爱的就是那个Arrow Notation。这个特性在编写组件时很有作用:

该函数的功能就是返回JSX对象,我们也可以忽略return语句:

代码行数又少了不少咯!

另一块我觉得非常适用Arrow Function的地方就是Redux的mapStateToProps函数:

需要注意的是,如果你返回的是Object,你需要包裹在大括号内:

使用Arrow Function优化的核心点在于其能够通过专注于函数的重要部分而提升代码的整体可读性,并且避免过多的模板代码带来的噪音。

合理使用Object Destructing与Spread Attributes

大的组件往往受困于this.props过长的窘境,典型的如下所示:

这么多的Props估计看着都头疼,如果我们要将这些Props继续传入下一层,大概就要变成下面这个样子了:

暂时不考虑unKnown Props,我们可以使用解构赋值来实现这个功能:

Method Definition Shorthand

最后这个方法不一定多有用,不过还是能让你的代码变得更加漂亮。如果你希望在Object中添加函数,你可以使用ES2015 Method Definition Shorthand来代替传统的ES5的表达式,譬如:

如果你想设置一个默认的空方法,也可以利用这种方式:

本文分享自微信公众号 - java一日一条(mjx_java),作者:收听我

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-12-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • SOA和微服务架构的区别

    微服务架构强调的第一个重点就是业务系统需要彻底的组件化和服务化,原有的单个业务系统会拆分为多个可以独立开发,设计,运行和运维的小应用。这些小应用之间通过服务完成...

    哲洛不闹
  • 如何构建一个较为通用的业务技术架构

    创业之初,我们往往会为了快速迭代出产品,而选择最简单的技术架构,比如LAMP架构,SSH三层架构。这些架构可以适应初期业务的快速发展,但是,随着业务变得越来越复...

    哲洛不闹
  • 微服务和容器对企业带来什么样的影响?

    IT经理、架构师和开发者都尝试妥协于微服务和容器对企业IT方式的改变。在某一个层面来说这是一件好事,但是事实上,一些更深层次的东西在驱动着技术和IT。

    哲洛不闹
  • Angular中,父组件向子组件传递 “模版内容引用”

    今天看到文章:https://segmentfault.com/a/1190000015944548 。专门研究一下ngTemplateOutlet用法!!!!

    申君健
  • Vue中组件之间8中通信方式,值得收藏

    vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的...

    用户6973020
  • Vue中组件之间8中通信方式,值得收藏

    vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的...

    用户1462769
  • Vue中组件之间8中通信方式,值得收藏

    vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的...

    coder_koala
  • Vue中组件之间8种通信方式,值得收藏

    vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢?首先我们需要知道在vue中组件之间存在什么样的关...

    前端达人
  • Vue案例引发的「嵌套组件」通信的简单方式

    我们都知道 Vue 是采用组件化开发的模式,组件化的优势在于相对独立,易于维护,可复用。你可以把项目看成许多组件的组合而成。

    六小登登
  • 从零开始学 Web 之 Vue.js(六)Vue的组件

    在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

    Daotin

扫码关注云+社区

领取腾讯云代金券