React组件模式 – gitconnected – Medium

原文出处 React Component Patterns – gitconnected – Medium

React组件模式

Stateful与Stateless, Container与Presentational, HOCs, Render Callbacks和其他

使用React有一段时间了,React是个Facebook的框架,通过JavaScript来搭建用户界面。如果一开始,我就知道下面这些概念就好了。本文将从我过去学到的经验中,总结出这些模式。对那些将要接触这美妙的组件式世界的开发者而言,是有帮助的。

Stateful和Stateless组件(有状态和无状态组件)

就像web服务的有状态和无状态一样,React组件可以在使用的时候保持和修改状态(有状态),也可以只是一个接受传入的props属性并显示的简单组件(无状态)。

一个简单的无状态按钮,只依赖于props属性:

一个有状态的计数组件例子(用到Button组件):

正如你所见的,后一个例子的构造函数设置了组件的状态,而前一个例子比较简单,它通过传入的props属性来渲染文本。这种分离的想法看起来简单,但却使得Button组件可以高度复用。

Container与Presentational 组件(容器与展示类组件)

当用到外部数据的时候,我们可以将组件分离成两个类别。容器类组件负责传递在React组件作用域外部的数据,如Redux或者Relay。而展示类组件不依赖于应用的其他部分,仅仅依赖于自己的状态或则传入的props属性。让我们看看一个展示类组件,用户清单的实现:

这个UserList组件会被容器类组件所更新:

通过这个方式,将数据获取从渲染中分离出来,并使得UserList可以复用。如果你想进一步学习这种模式,Dan Abramov的这篇文章讲解地很清楚。

高阶组件

高阶组件,HOCs,有助于组件逻辑的复用。高阶组件是一个函数,该函数接受一个组件作为传参,并返回一个新的组件。

假设你需要构建一个可扩展的菜单组件,当用户点击的时候,它将展示子内容。那你可以简单地创建一个通用HOC,而不是通过控制父组件的状态来实现。

这种方式让我们可以使用装饰者语句,将上文的逻辑行为应用到ToggleableMenu组件上。

现在我们可以在ToggleableMenu组件上传入任意子元素:

如果你熟悉Reduxconnect函数或者React RouterwithRouter函数,那你已经在用HOCs了。

Render Callbacks(回调式渲染)

另一个使得组件逻辑行为可以复用的方法,是将你的组件的chidren属性转为函数,这也是为什么Render Callbacks(回调式渲染)也称之为Function as Child Components(类子组件函数)。这里我们用Render Callbacks的方式来重写可扩展菜单的HOC组件:

现在我们可以传入一个函数作为Toggleable的组件的children:

上面的代码就已经使用函数作为子组件,但是,如果想要复用它,就像在HOC例子(多菜单)里面一样,我们可以简单地创建一个新的组件,并使用Toggleable的逻辑行为。

我们全新的组件ToggleableMenu已经可以用了:

我们的Menu组件就和HOC例子里面的一样!

当我们要修改渲染内容,而不受状态操作影响的时候,这个方法就会很有用。正如你所看见的,我们把渲染(render)的逻辑行为放到ToggleableMenu的子函数里面,但在Toggleable组件里保留住状态(state)的逻辑!

深入阅读

上面的例子只是一些React模式的基础,如果你想要更进一步的深入这些话题,我建议你看看下面这些: