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）所顯示的時間是不同的，說明每個時鐘組件定義的計時間隔是隨機的。這一點更好地證明了每個時鐘組件都是單獨設置其自己的計時器，并且獨立地進行更新。