2.2 React組件的數據

“差勁的程序員操心代碼，優秀的程序員操心數據結構和它們之間的關系?！?/p>

——Linus Torvalds, Linux創始人

毫無疑問，如何組織數據是程序的最重要問題。

React組件的數據分為兩種，prop和state，無論prop或者state的改變，都可能引發組件的重新渲染，那么，設計一個組件的時候，什么時候選擇用prop什么時候選擇用state呢？其實原則很簡單，prop是組件的對外接口，state是組件的內部狀態，對外用prop，內部用state。

為了演示屬性的使用，我們構造一個應用包含兩個組件，Counter組件和ControlPanel組件，其中ControlPanel組件是父組件，包含若干個Counter組件，相關代碼在Github上對應本書的代碼庫github.com/mocheng/react-and-redux/tree/master/chapter-02/cont-rolpanel中。

圖2-1 ControlPanel應用效果圖

我們可以看到三個Counter組件有了不同的初始計數值，點擊網頁中的“+”按鈕可以看到對應一行的計數增加，點擊“-”按鈕可以看到對應一行的計數減少。

這并不是一個復雜的程序，但是可以看出屬性和狀態在React組件中的作用。