Pete Hunt React:重新思考典范实例的意义— JSConf EU

Posted by Bibooo on 07-17,2022

视频链接

这是我在 YouTube 看到一个视频,我觉得讲的非常好,比较形象化。

做 React 的设计决策,与其他框架不同之处,以及一些实作方式,如何帮助我们更快速决策

**分离(SOC)**究竟代表什么?我们一直提倡耦合度,提高内聚力。耦合与内聚是两个非常重要的软体工程原则。

模块

模块就是从逻辑上将系统分解为更细微的部分,分而治之,复杂问题拆解为若干简单问题,琢个解决。

耦合主要描述模块之间的关系,内聚主要描述模块内部。模块的粒度可大可小,可以是函数,类,功能块等等。

耦合

模块之间存在依赖,导致改动可能会互相影响,关系越紧密,耦合越强,模块独立性越差。

比如模块 A 直接操作了模块 B中的数据,则视为强耦合,若 A 只是通过数据与模块 B交互,则视为弱耦合。

独立的模块便于扩展,维护,写单页测试。如果模块之间重重依赖,会极大降低开发效率。

内聚

模块内部的元素,关联性越强,则内聚越高,模块单一性更强。一个模块应当尽可能独立完成某个功能。

如果有各种场景需要被引入到当前模块,代码质量将变成非常脆弱,这种情况建议拆分多个模块。

低内聚的模块代码,不管是维护,扩展还是重构都相当麻烦。

我们一直提倡降低耦合度,提高内聚力,耦合和内聚是两个非常重要的软件工程原则

为什么使用 jsx

它结合了模版的易用性和 JavaScript 的强大能力

React 最重要的是 元件,而不是 模版 这就是分离点。

React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合,比如,在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI,以及需要在 UI 中展示准备好的数据。

React 并没有采用将标记与逻辑分离到不同文件这种人为的分离方式,而是通过将二者共同存放在称之为“组件”的松散耦合单元之中,来实现关注点分离