首页 > 其他 > 详细

设计react组件

时间:2018-05-21 11:01:38      阅读:124      评论:0      收藏:0      [点我收藏+]

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

易于维护组件的设计要素

作为软件设计的通则,组件的划分要满足高内聚(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。

设计react组件

原文:https://www.cnblogs.com/mawn/p/9065829.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!