2.2 React组件的数据

“差劲的程序员操心代码，优秀的程序员操心数据结构和它们之间的关系。”

——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组件中的作用。