React 组件设计模式基础

原文地址：http://t.cn/R8xPX8u

原文作者：Gustavo Matheus

随着 React 在前端开发中越来越流行，各种各样的设计模式及新概念亦层出不穷。本文旨在总结 React 开发中一些常见的设计模式。

有状态 (Stateful) vs 无状态 (stateless)

React 组件可以是有状态的，在其生命周期内可以操纵并改变其内部状态；React 组件也可以是无状态的，它仅接受来自父组件传入的 props，并进行展示。

下面是一个无状态的 组件，它的行为完全由传入的 props 决定：

下面是一个有状态组件(使用了上述的无状态组件):

正如你所看到的，上述 组件在 中维护了自己的状态，而之前的 组件仅根据 props 来进行渲染展示。这个区别看似很小，但是无状态的 组件却高度可复用。

容器(Container) vs 展示(Presentational) 组件

当与外部数据进行交互时，我们可以把组件分为两类:

容器组件：主要负责同外部数据进行交互（通信），譬如与Redux等进行数据绑定等。

展示组件：根据自身 state 及接收自父组件的 props 做渲染，并不直接与外部数据源进行沟通。

我们来看一个展示组件：

而这个展示组件可以被一个容器组件更新：

通过将组件区分为容器组件与展示组件，将数据获取与渲染进行分离。这也使 可复用。如果你想了解更多，这里有一些非常好的文章，解释地非常清楚。

高阶(Higher-Order)组件

当你想复用一个组件的逻辑时，高阶组件(HOC)就派上用场了。高阶组件就是 JavaScript 函数，接收 React 组件作为参数，并返回一个新组件。

举个例子：编写一个菜单组件，当点击一个菜单项时，展开当前菜单项，显示子菜单。当然我们可以在父组件里来控制此菜单组件的状态，但是更优雅的方式，是使用高阶组件：

通过这种方式，我们可以使用 JavaScript 的装饰器语法，将我们的逻辑应用于 组件:

现在，我们可以将任何子菜单内容放入 组件中：

当你在使用Redux的 ，或者React Router的 函数时，你就是在使用高阶组件！

渲染回调（Render Callbacks）

除了上述的高阶组件外，渲染回调是另一种使组件可复用的设计模式。渲染回调的核心是组件接收的子组件(或子结点，亦即 )，不以 提供，而是以回调函数的形式提供。以上述HOC组件为例，我们通过渲染回调的方式重写如下：

现在，我们可以传入回调函数给 组件作为子结点。 我们用新方式实现之前的HOC组件 ：

而我们全新的 组件实现如下：

是的，你没有看错，新的 组件同之前以HOC模式实现出来的一模一样！

在这种实现方式下，我们将组件内部的状态( )与组件的渲染逻辑进行剥离。在上面的例子中，我们将渲染逻辑放在了 的渲染回调中，而展示组件的状态( )依然在 组件内进行维护。