2.1 React Native 组件的数据

React Native 组件的数据分为两种，prop（属性,property的缩写） 和 state（状态） ，无论是属性还是状态的改变，都可能引发组件的重新渲染。 所以，一定要记住一个原则，只能由属性或者状态控制界面显示内容的变化，其它的变量绝对不允许控制显示内容的变化。

归结为一个公式，就像下面这样：

UI=render(data)

公式的含义就是用户看到的界面（UI），应该是 render() 函数执行的结果，只接受数据（data）作为参数。这是一个毫无副作用的函数，data 其实就是 prop 和 state ，两次函数如果输入的属性和状态相同，得到的 UI 一定是一样的。

prop 一般用于组件的对外接口，state 是组件的内部状态。

为了演示 prop 和 state 的使用，我们创建一个选择商品数量的组件。如图2-1所示。

图2-1 显示商品数量的组件

我们在工程目录下创建 src 目录，这个目录和 android/ios 目录平级，用来存放 RN 源码，里面创建一个 component 文件夹用来存放自定义组件。

接下来自定义我们第一个组件 Counter ，工程文件路径：“/src/component/Counter.js”