React学习手册

React Redux

｜

215

}

export default Color

ColorList

现在是一个组件类，并且可以通过

this.context

访问上下文。

Colors

可以通

过

store.getState

直接从

Store

中读取。相同的规则也适用于无状态函数式组件。必须

在实例上定义

contextTypes

。

从上下文中访问

Store

是一种减少引用的好办法，不过它并不是每个应用程序必不可少

的部分。

Redux

的创始人

Dan Abramov

甚至声称可以不必遵循这些模式：

将容器和表现层组件分离通常是个好主意，但是用户也不必拘泥于此。只有在它

可以切实降低项目代码的复杂度时才有必要这么做。

注

2

表现层和容器组件

在上一个示例中，

Color

组件是通过上下文访问

Store

的，并且使用它可以直接分发

RATE_COLOR

和

REMOVE_COLOR

这两个

Action

。在此之前，

ColorList

组件通过上

下文访问了

Store

，从

State

中读取了当前的颜色列表信息。在这两个示例中，这些组件

是直接和

Redux

的

Store

交互来渲染

UI

元素的。我们可以通过将

Store

和渲染

UI

的组件脱

钩来优化应用程序架构。

注

3

表现层组件就是指渲染

UI

元素的组件。

注

4

它们并没有和任何数据架构紧密地耦合在一

起。相反，它们通过属性接收数据，并且通过回调函数属性将数据回传给它们的父组

件。它们只是纯粹地聚焦于

UI

，并且可以在包含不同数据的应用程序之间复用。除了

App

组件之外，我们第

6

章创建的组件都是表现层组件。

容器组件就是将表现层组件和数据相连的组件。具体到我们的示例中，容器组件将会 ...