深入React组件的数据：prop、state

• React组件的数据分为两种，prop和state，无论prop或者state改变，都可能引发组件的重新渲染。
• prop是组件对外接口，state是组件的内部状态，对外用prop，对内用state。
  （如果你熟悉Vue，React中的prop就相当于Vue组件的data() { return {} }里的数据，React的state就相当于Vue中的prop）
• 组件不应该改变prop的值，而state存在的目的就是让组件来改变。

一、prop

在React中，prop（propety的简写）是从外部传递给组件的数据，一个组件通过定义自己能够接受的prop就定义了自己对外公共接口。

1.给prop赋值

// 一段JSX代码中：
<SampleButton id="sample" borderWidth={2} onClick={onButtonClick} style={{ color: "red" }} />

• 在例子中，创建了名字为SampleButton 的组件实例，id、borderWidth、onClick、style四个prop。
• HTML中的属性，只支持字符串类型，而React组件，除了支持字符串，还支持数字（2），函数（onButtonClick ），对象（{ color: "red" }）。
• 只要prop值不是字符串类型，就必须要用{}把prop值括住。所以对象变量会有两层{{}}。

2.读取prop的值

class Counter extends Component {
  constructor(props) {
    super(props)

    this.onClickIncrementButton = this.onClickIncrementButton.bind(this)
    this.onClickDecrementButton = this.onClickDecrementButton.bind(this)

    this.state = {
      count: props.initValue || 0    
    }
  }
}

• 如果一个组件需要定义自己的构造函数，一定要记得在构造函数的第一行通过super调用父类也就是React.Component 的构造函数。

• 如果在构造函数中没用调用super(props)，那么组件实例被构造之后，类实例的所有成员就无法通过this.props 访问到父组件传递过来的props值。

• 很明显，给this.props 赋值是React.Component 构造函数的工作之一。

• 在Counter的构造函数中还给两个成员版定了当前this的执行环境，因为ES6的构造方法创造的React组件类并不自动给我们绑定this到当前实例对象。

• 在构造函数中，可以通过参数props获得传入的prop值。

• 其他函数中，通过this.props获得传入的prop值，还可以使用ES6的结构赋值：（const { test } = this.props 相当于const test = this.props.test）

3.propTypes检查

在ES6方法定义的组件类中，可以通过增加类的propTypes属性来定义prop的规格，这不只是声明，还是一种限制。在运行时和静态代码检查时，都可以根据propTypes 判断外部世界是否正确地使用了组件。

Counter.propTypes = {
  caption: PropTypes.string.isRequiered,
  initValue: PropTypes.number
}

• 其中要求 caption必须是 string 类型
• 其中要求 initValue 必须是 number 类型
• 其中要求 caption 必需

propTypes虽然能够在开发阶段发现代码中的问题，但是放在产品环境不合适，会占用一些代码空间，消耗CPU计算资源。所以在开发阶段使用，当部署到环境产品时应该去掉。
babel-react-optimize就有这个功能，通过npm来安装，但是应该确保只在发布产品代码时使用它。

二、state

state表示组件的内部状态。由于React组件不能修改传入的prop，所以需要记录自身数据变化，就要用到state。

1.初始化state

通常都会在组件类的构造函数的结尾处初始化state。

constructor(props) {
  ...
  this.state = {
    count: props.initValue || 0
  }
}

• 通过对this.state的赋值完成了对组件state的初始化
• 组件的state，必须是一个JavaScript对象
• 如果在propTypes声明中有用isRequired要求必须有值的prop，则需要在代码中判断所给prop值是否存在，如果不存在，就给一个默认的初始值。

可以用React的defaultProps：

Counter.defaultProps = {
  initValue: 0
}

这样，Counter构造函数中的this.state初始化中可以省去判断条件，代码可以简化为：

constructor(props) {
 ...
 this.state = {
   count: props.initValue
 }
}

如果实例中即使没有指定count属性的initValue，实例组件中的count属性也能收到一个默认的属性值0。

2.读取和更新state

通过给button的onClick属性挂载点击事件处理函数，我们可以改变组件的state，以点击按钮给count加1的响应事件为例：

onClickIncrementButton() {
  this.setState({ count: this.state.count + 1 })
}

• 在事件中，由于绑定了this，就能通过this.state读取到组件的当前state。
• 改变组件state必须要试用this.setState函数，而不能直接去修改this.state。
• 直接修改this.state值，虽然改变了组件的内部状态，但不会驱动组件进行重新渲染，就不会实时反应this.state的值的变化。
• 而this.setState函数所做的事情，首先是改变this.state的值，然后驱动组件经历更新过程，这样this.state才会以新的值出现在界面上。