基于原生js封装react 组件_React组件应该如何封装？

原文的篇幅非常长，不过内容太过于吸引我，还是忍不住要翻译出来。此篇文章对编写可重用和可维护的React组件非常有帮助。但因为篇幅实在太长，我对文章进行了分割，本篇文章重点阐述 封装。因本人水平有限，文中部分翻译可能不够准确，如果您有更好的想法，欢迎在评论区指出。

封装

一个封装组件提供 props 控制其行为而不是暴露其内部结构。

耦合是决定组件之间依赖程度的系统特性。根据组件的依赖程度，可区分两种耦合类型：

• 当应用程序组件对其他组件知之甚少或一无所知时，就会发生松耦合。
• 当应用程序组件知道彼此的许多详细信息时，就会发生紧耦合。

松耦合是我们设计应用结构和组件之间关系的目标。

松耦合应用(封装组件)

松耦合会带来以下好处：

• 可以在不影响应用其它部分的情况下对某一块进行修改。、
• 任何组件都可以替换为另一种实现
• 在整个应用程序中实现组件复用，从而避免重复代码
• 独立组件更容易测试，增加了测试覆盖率

相反，紧耦合的系统会失去上面描述的好处。主要缺点是很难修改高度依赖于其他组件的组件。即使是一处修改，也可能导致一系列的依赖组件需要修改。

紧耦合应用(组件无封装)