设计react组件

Posted 2020-11-07 mawn

首先作为一个合格的开发者，不要只满足于编写出了可以运行的代码，而耍了解代码背 后的工作原理;不要只满足于自己编写的程序能够运行，还要让自己的代码可读而且易 于维护 。 这样才能开发出高质量的软件 。

易于维护组件的设计要素

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

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

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

 

react组件的数据

俗话说的好  差劲的程序员操心代码，优秀的程序员操心数据结构和它们之间的关系

React组件的数据分为两种， prop和 state，无论 prop或者 state 的改变，都可能引发组件的重新渲染，那么，设计一个组件的时候，什么时候选择用 prop什么时候选择用state 呢?其实原则很简单， prop 是组件的对外接口， state 是组件的内部状态，对外用prop，内部用 state。