写出易维护的代码|React开发的设计模式及原则

介绍

设计模式是最常见的,通用问题的可复用解决方案的归纳总结,通常被认为是解决该类问题的最佳实践,使用设计模式能帮助我们写出更容易维护,更健壮的代码。设计模式有很多,通常它们都会遵循一些共同的设计原则,接下来我们一起回顾下React社区里出现过的一些设计模式,以及它们所遵循的设计原则。

一些设计原则

1.单一职责原则(Single-responsibility responsibility) : 每个实体(class, function, module)只应该有一个职责。例如当一个组件接收了太多的props,我们应该考虑组件是不是做了太多的事情,有没有必要进行拆分。

2.开闭原则(Open-closed principle):实体(class, function, module) 应该对扩展开放,但是对修改关闭。开闭原则意味着应该存在不直接修改的方式扩展实体的功能。

3.依赖反转原则(Dependency inversion principle):依赖于抽象,而不是具体的实现。依赖注入是一种实现依赖反转的方式。

4.不要自我重复 (Don't repeat yourself):重复代码会造成代码维护的困难。

5.Composition over inheritance[1]: 通过组合集成的两个组件是松耦合关系,通过props来约束。但是有继承关系的两个组件是强耦合关系,对父组件的修改可能会导致子组件的未预期的结果。

React设计模式

Container & presentational component[2]

把业务组件划分成container组件和presentational组件。Presentational component中负责组件的ui渲染,Container component负责数据的获取和事件的响应。

遵循的设计原则:

1.单一职责原则:Presentational component负责ui,Container component负责数据和行为。

2.Don't repeat yourself: Presentational component是纯ui组件,不包含业务逻辑,通常可以被复用。

示例:

HOC

Higher-order component 是一个以组件为参数,返回一个新组件的函数,用于复用组件的逻辑,Redux的 connect[3] 和 Relay的createFragmentContainer[4]都有使用HOC模式。

遵循的设计原则:

1.Don't repeat yourself:把可复用的逻辑放到HOC中,实现代码复用。

2.Composition over inheritance: hoc中传入的组件和返回的组件是组合的关系, 也可以把多个HOC进行多次的嵌套组合。

示例:

Render prop

Render prop是指组件的使用者通过组件暴露的函数属性来参与定制渲染相关的逻辑。使用Render prop模式的库包括: React Router[5], Downshift[6] and Formik[7].

遵循的设计原则:

1.Don't repeat yourself:把可复用的逻辑放到组件中,实现代码复用。

2.依赖反转原则:通过render prop注入渲染相关的实现。

3.开闭原则(Open-closed principle):通过render prop暴露扩展点,而不是直接定制组件。

示例:

Compound components

Compound components是指通过多个组件的组合来完成特定任务,这些组件通过共享的状态、逻辑进行关联。典型的例子是Select和Select.Option组件。使用Compound components模式的库包括:semantic ui[8];

遵循的设计原则:

1.单一职责原则(Single-responsibility responsibility): 拆分成多个组件,每个组件承担自己的职责。

2.开闭原则(Open-closed principle):需要迭代增强功能时,可以通过创建新的子组件的方式进行扩展。

示例:

Custom hooks

自定义hooks可以做到把与state和生命周期关联的可复用逻辑封装到独立的函数中, 上面的提及的一些模式都是基于组件的方案,自定义hooks是更细粒度的解决方案。

遵循的设计原则:

1.Don't repeat yourself:把可复用的逻辑放到自定义hooks中,实现代码复用。

2.单一职责原则:每个自定义hooks是都是一个独立的逻辑单元。

示例:

结尾

上面提及的曾经在社区流行的设计模式,往往遵守了一些设计原则,从而能帮助开发者写出健壮,易维护的代码。但是我们需要能根据实际的场景做出判断,是否需要引入这些模式,毕竟还有一个设计原则是YAGNI (You aren't gonna need it)。

参考链接:

[1]https://reactjs.org/docs/composition-vs-inheritance.html

[2]https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

[3]https://github.com/reduxjs/react-redux/blob/master/docs/api/connect.md#connect

[4]https://relay.dev/docs/v10.1.3/fragment-container/#createfragmentcontainer

[5]https://reactjs.org/docs/composition-vs-inheritance.html

[6]https://reacttraining.com/react-router/web/api/Route/render-func

[7]https://github.com/paypal/downshift

[8]https://github.com/jaredpalmer/formik

[9]https://react.semantic-ui.com/

标签: 代码

最新资讯

文档百科

胆囊癌病因病理

胆囊癌的病因尚不清楚,临床观察胆囊癌常与胆囊良性疾患同时存在,最常见是与胆囊结石共存。多数人认为胆囊结石的慢性刺激是重要的致病因素。还有人提出胆囊癌的发生可能与病人的胆总管下端和主胰管的汇合连接处存在畸形有关,因有此畸形以致胰液进入胆管内,使胆汁内的胰液浓度提高,引起胆囊的慢性炎症,粘膜变化生,最后发生癌变。

养鱼的数量有什么讲究?

6、地图鱼:地图鱼是慈鲷科图丽鱼属鱼类,学名图丽鱼,亦称猪仔鱼、尾星鱼、黑猪鱼等,因鱼体有不规则斑点并间杂红色斑块酷似地图而得名,原产于南美洲亚马逊河流域。

如何选购帆布包呢 洗帆布包要注意什么呢

大家在生活中应该都听说过或者有帆布包吧,那你喜欢帆布包吗?今天小编就和大家一起来了解一下吧,究竟如何选购帆布包呢,以及洗帆布包要注意什么呢,跟着小编我们一起来学习吧。

怀孕期间做B超前要注意,如果出现这3种情况要告知医生!

很多女性都知道在怀孕期间进行B超检查是非常重要的,通过B超能知道胎儿的各项发育情况,而有很多孕妇认为在孕期只需要做一两次B超判断胎儿不存在异常就不需要再进行B超,却不知在孕期不同阶段进行B超检查所得到的结果以及作用都有所不同。

孕妇水肿食疗之鲫鱼红豆汤的做法详解

鲤鱼红豆汤可治疗孕妇水肿。

养蛇最少投资多少

养蛇最少投资多少?如果自己充足,想快速的发展的话,可以建一个规模养蛇场,这样可以节省很多的资金,如养蛇的规模不是很大,就不能去包下各地的大型孵化场,也不能大量的到外地采购便宜的饲料,购买药品,蛇种蛋也没有还价的筹码。这都是钱多的优势。也可以达到同样的效果,这就为初养蛇的朋友减少了建蛇场的大量资金。

CopyRight © 2000~2023 一和一学习网 Inc.All Rights Reserved.
一和一学习网:让父母和孩子一起爱上学习