4.10 自顶向下的数据流

从前文中知道，React框架中的组件是被定义为具有状态（State）的。但是，无论是父组件或子组件都不能知道某个组件是有状态还是无状态的，并且自己也并不知道（不应该去关心）某个组件是通过函数方式或是通过ES6 Class方式去定义的。

这点恰好解释了“React状态（State）通常被称为局部的或封装的”的原因。在React框架中，状态（State）除了定义它的自身组件，其他的组件均是不可访问它的。因此，无论是对于父组件或是子组件，都无法知道某个组件是有状态的还是无状态的，也并不知道（不应该去关心）某个组件是函数组件或是ES6 Class组件。

在React框架中，可以将组件所定义的状态（State）作为Props参数向下传递到其子组件中，但是子组件却无法知道该参数是来自于父组件的状态（State）、参数（Props）或者是人工输入的。

这一点如何理解呢？下面，我们通过一个具体的代码实例讲解一下：

【代码4-20】（详见源代码目录ch04-react-state-data-flow.html文件）

关于【代码4-20】的说明：

●第17~19行代码定义了一个函数组件（FormattedDate），用于在页面中显示当前时间。

●第21~53行代码定义了一个类组件（ClockReactComp），相当于一个时钟组件。其中，在第47~49行代码所定义的函数组件（FormattedDate）渲染方法中，分别使用了三种方式。

●第47行代码是通过类组件（ClockReactComp）的状态属性（date）获取的时间，通过Props参数传递给函数组件（FormattedDate）的方式渲染的。

●第48行代码是通过直接获取时间，通过Props参数传递给函数组件（FormattedDate）的方式渲染的。

●第49行代码是通过类组件（ClockReactComp）的Props参数（propsDate）获取的时间，通过Props参数传递给函数组件（FormattedDate）的方式渲染的。其中，参数“propsDate”的定义在第22~24行代码中。

测试网页的效果如图4.8所示。页面中同时显示出了3个时钟的效果，说明函数组件（FormattedDate）是不关心时间参数是如何从时钟组件（ClockReactComp）获取的，也不关心时钟组件（ClockReactComp）到底是函数组件还是类组件。

在React框架中，这被称为“自顶而下”的数据流，就好比树形结构所构成的、自顶而下的单向数据流。对于React状态（State）而言，其仅仅属于自身的组件，而且从该状态（State）所派生的任何数据或UI只能影响其所派生的组件。

React官方文档中对此有一个形象的比喻—“数据瀑布”。具体解释就是，在一个以组件为节点所构成的树形瀑布中，每一个组件的状态（State）就像在此节点上额外增加的水源，仅仅属于该节点，并且只能向下单向流动。

下面，我们在【代码4-20】的基础上稍做修改，创建一个同时渲染三个时钟组件的App组件，借此说明一下“数据瀑布”的特性，具体代码如下：

【代码4-21】（详见源代码目录ch04-react-state-data-flow-tri.html文件）

关于【代码4-21】的说明：

●第54~62行代码增加定义了一个组件（ClockDataFlow），其中第57~59行代码同时引用了3个相同的时钟组件（ClockReactComp）。

测试网页的效果如图4.9所示。3个时钟组件（ClockReactComp）每个都单独设置其自己的计时器、并且独立进行更新。

由于【代码4-21】所定义的3个时钟组件（ClockReactComp）是同时启动计时器的，也许时钟独立动态更新的效果不明显。下面，我们尝试再将【代码4-21】稍做修改，让3个时钟组件表现出差异性，具体代码如下：

【代码4-22】（详见源代码目录ch04-react-state-data-flow-tri-random.html文件）

关于【代码4-22】的说明：

●第31~34行代码定义的setInterval()计时器方法中，第33行代码是通过随机函数生成的时间间隔。目的很简单，在3个时钟组件初始化的过程中，每个时钟组件更新的时间间隔就是随机的。因此，3个时钟组件在页面渲染出来的效果（更新时间间隔）是不同的。

测试网页的效果如图4.10所示。3个时钟组件（ClockReactComp）所显示的时间是不同的，说明每个时钟组件定义的计时间隔是随机的。这一点更好地证明了每个时钟组件都是单独设置其自己的计时器，并且独立地进行更新。