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

 

封装

 

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

 

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

 

当应用程序组件对其他组件知之甚少或一无所知时，就会发生松耦合。

 

当应用程序组件知道彼此的许多详细信息时，就会发生紧耦合。

 

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

 

松耦合应用(封装组件)

 

松耦合会带来以下好处：

 

可以在不影响应用其它部分的情况下对某一块进行修改。、

 

任何组件都可以替换为另一种实现

 

在整个应用程序中实现组件复用，从而避免重复代码

 

独立组件更容易测试，增加了测试覆盖率

 

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

 

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

 

封装 或 信息隐藏 是如何设计组件的基本原则，也是松耦合的关键。

 

信息隐藏

 

封装良好的组件隐藏其内部结构，并提供一组属性来控制其行为。

 

隐藏内部结构是必要的。其他组件没必要知道或也不依赖组件的内部结构或实现细节。

 

React 组件可能是函数组件或类组件、定义实例方法、设置 ref、拥有 state 或使用生命周期方法。这些实现细节被封装在组件内部，其他组件不应该知道这些细节。

 

隐藏内部结构的组件彼此之间的依赖性较小，而降低依赖度会带来松耦合的好处。

 

通信

 

细节隐藏是隔离组件的关键。此时，你需要一种组件通信的方法：props。porps 是组件的输入。

 

建议 prop 的类型为基本数据（例如，string 、 number 、boolean）：

 

<Message text="Hello world!" modal={false} />;

 

必要时，使用复杂的数据结构，如对象或数组：

 

<MoviesList items={['Batman Begins', 'Blade Runner']} />

 

prop 可以是一个事件处理函数和异步函数：

 

<input type="text" onChange={handleChange} />

 

prop 甚至可以是一个组件构造函数。组件可以处理其他组件的实例化：

 

function If({ component: Component, condition }) {

 

 return condition ? <Component /> : null;

 

}

 

<If condition={false} component={LazyComponent} /> 

 

为了避免破坏封装，请注意通过 props 传递的内容。给子组件设置 props 的父组件不应该暴露其内部结构的任何细节。例如，使用 props 传输整个组件实例或 refs 都是一个不好的做法。

 

访问全局变量同样也会对封装产生负面影响。

 

案例研究：封装修复

 

组件的实例和状态对象是封装在组件内部的实现细节。因此，将状态管理的父组件实例传递给子组件会破坏封装。

 

我们来研究一下这种情况。