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

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

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

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

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

1、单一职责

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

2、良好的封装

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

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

3、可组合

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

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

4、可重用

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

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

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

6、可测试

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

7、含义清晰易懂

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

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

相关文章

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

    (这里有一篇很棒的英文博文,值得学习) 可靠的组件通常有这么7个特征: 1、单一职责 一个组件只实现一个职责,只有...

  • React基础

    React包含react元素和react组件 react元素 react组件 react组件分为函数组件和类组件 ...

  • React组件规范和生命周期

    组件规范 当你通过调用React.createClass()创建一个组件类时,应该提供一个包含render方法和其...

  • react 整体疑问

    组件该如何拆分react 相关 什么时候选择react-hooks react生命周期 哪些will被替换 g...

  • npm: react-beautiful-dnd

    简介react-beautiful-dnd基于react的一个组件库,主要包含三个组件. DragDropCont...

  • 2.组件的生命周期

    1. 基础 react中创建新组件的api: 上述js片段中“//组件详细说明”是一个js对象,该对象需要包含一个...

  • Hooks

    React 为什么要搞 Hooks,React Hooks 帮我们解决了哪些问题 ? 无须为该使用无状态组件(Fu...

  • React概念

    介绍 React的核心思想是:封装组件。React大体包含下面概念: 组件React 应用都是构建在组件之上。上面...

  • useCallback 和 useMemo

    在hooks诞生之前,如果组件包含内部 state,我们都是基于 class 的形式来创建组件。 在react中,...

  • 如何更好地进行复盘

    如何进行复盘 一、从哪几个方面来进行复盘 1、信息 在做这件事时我利用了哪些信息?其中哪些信息是最关键的?这些信息...

网友评论

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

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