美文网首页
一个可靠的React组件应该包含哪些品质,或者说该从哪几个方面来

一个可靠的React组件应该包含哪些品质,或者说该从哪几个方面来

作者: 风雅欢乐 | 来源:发表于2020-06-14 16:22 被阅读0次

    (这里有一篇很棒的英文博文,值得学习)

    可靠的组件通常有这么7个特征:

    1、单一职责

    一个组件只实现一个职责,只有一个原因会导致组件改变。组件的职责可以是渲染列表、显示数据或者发送HTTP请求等等等等。单一职责的原则确保了组件修改是相对隔离并且可控的,不会对其他组件产生影响。

    2、良好的封装

    将组件进行良好的封装,只提供props配置来改变组件的行为并且隐藏组件的内部结构。对组件进行封装是为了降低组件间的耦合。松耦合有这么几个好处:

    • 当修改整个应用的一部分时不会对其他部分产生任何影响
    • 任何组件都可以被另外的实现方式给轻松替代
    • 在整个应用的范围内确保了组件的可重用性,满足“不重复书写”原则
    • 相对独立的组件更容易测试

    3、可组合

    “单一职责原则”描述了怎么把需求拆分成为一个一个单独的组件;封装描述了怎么把这些组件进行组织;而组合描述了怎么将组件又重新拼接成整个系统。
    符合“单一职责原则”,进行了良好的封装的组件,就容易进行组合。组件可以进行组合的好处有:

    • 组合可以将多个更小的单一组件合并成复杂的组件
    • 组合可以使得组件可以重用某些通用逻辑
    • 不同的情况组合不同的小组件,使得组件书写更具灵活性
    • 开发和应用的构建更高效

    4、可重用

    组件的复用实际上意味着对它职责的复用。因此,跟上面一样,遵循“单一职责”原则并且进行了良好封装的组件更容易进行复用。

    5、是“纯组件”或“类纯组件”

    “纯组件”指的是对于同样的props值,总是渲染相同内容的组件;“类纯组件”指的是对于同样的props值,总是渲染相同内容,但是会产生副作用的组件。
    同样的,“纯组件”和“类纯组件”更加利于组合和复用。可以通过对副作用操作抽离将不纯的组件转换为纯组件。

    6、可测试

    当一个组件结构设计良好的时候,对它进行测试就会相对容易。设计良好就包括了上面提到的所有内容。可测试性是判断一个组件结构有多好的一个实用标准。

    7、含义清晰易懂

    组件清晰易懂指的是开发者要能够很容易理解这个组件是做什么的。在组件的命名方面可以有这么几点需要注意:

    • 驼峰式命名
    • 组件越专业(功能越细),为了描述它的功能所用到的单词就会越多,可以适当使用动词来描述组件功能
    • 对于同一个概念,使用同一个单词。比如“列表”这个概念,既可以使用table,也可以使用list,随意选择一个,但是在所有的代码中,使用同样的单词表示同样的概念
    • 良好的命名可以是自解释的,某些时候不使用注释就能看得懂,但同时,在觉得需要解释说明的地方加上注释
    • 注意:代码书写清晰易懂比简介更好

    相关文章

      网友评论

          本文标题:一个可靠的React组件应该包含哪些品质,或者说该从哪几个方面来

          本文链接:https://www.haomeiwen.com/subject/vvgxxktx.html