易于维护组件的设计要素

180 阅读3分钟

在深入浅出react中这样描述

---------------------------------------------

       任何一个复杂的应用,都是由 一个简单的应用发展而来的 ,当 应用还很简单的时候, 因为功能很少,可能只有一个组件就足够了,但是,随着功能的增加,把越来越多的功 能放在一个组件中就会显得雕肿和难以管理 。 

       就和 一个人最好一 次只专注做一件事一样,也应该尽量保持一个组件只做一件事 。 当开发者发现一个组件功能太多代码量太大的时候,就要考虑拆分这个组件,用多个小 的组件来代替 。 每个小的组件只关注实现单个功能,但是这些功能组合起来,也能满足复杂的实际需求 。

       这就是“分而治之”的策略,把问题分解为多个小问题,这样既容易解决也方便维 护,虽然“分而治之”是一个好策略,但是不要滥用,只有必要的时候才去拆分组件, 不然可能得不偿失 。

       拆分组件最关键的就是确定组件的边界,每个组件都应该是可以独立存在的,如果 两个组件逻辑太紧密,元法清晰定义各自的责任,那也许这两个组件本身就不该被拆开, 作为同 一个组件也许更合理 。 

       虽然组件是应该独立存在的,但是并不是说组件就是孤岛一样的存在,不同组件之 间总是会有通信交流,这样才可能组合起来完成更大的功能 。 

       作为软件设计的通则,组件的划分要满足高内聚(High Cohesion)和低搞合(Low Coupling)的原则 。 

       高内囊指的是把逻辑紧密相关的内容放在一个组件中 。 用户界面无外乎内容 、 交互 行为和样式 。 传统上,内容由 HTML 表示,交互行放在 JavaScript 代码文件中,样式放 在 css 文件中定义 。 这虽然满足一个功能模块的需要,却要放在三个不同的文件中,这 其实不满足高内聚的原则 。 React 却不是这样,展示内容的 JSX 、定义行为的 JavaScript 代码,甚至定义样式的 css ,都可以放在一个 JavaScript 文件中,因为它们本来就是为 了实现一个目的而存在的,所以说 React 天生具有高内聚的特点 。 

       低辑合指的是不同组件之间的依赖关系要尽量弱化,也就是每个组件要尽量独立 。 保持整个系统的低搞合度,需要对系统中的功能有充分的认识,然后根据功能点划分模 块,让不同的组件去实现不同的功能,这个功夫还在开发者身上,不过, React 组件的对 外接口非常规范,方便开发者设计低祸合的系统 。 

      上面介绍的只是通用的软件设计原则,对于 React 这个工具,要充分应用这些原则, 则需要对 React 的特性有充分的认识 。 

----------------------------------------