react使用 PropTypes 和 getDefaultProps()

一定要写PropTypes，切莫为了省事而不写
如果一个Props不是requied，一定在getDefaultProps中设置它
React.PropTypes主要用来验证组件接收到的props是否为正确的数据类型，如果不正确，console中就会出现对应的warning。出于性能方面的考虑，这个API只在开发环境下使用。

基本使用方法：

propTypes: {
    myArray: React.PropTypes.array,
    myBool: React.PropTypes.bool,
    myFunc: React.PropTypes.func,
    myNumber: React.PropTypes.number,
    myString: React.PropTypes.string，
     
     // You can chain any of the above with `isRequired` to make sure a warning
    // is shown if the prop isn't provided.
    requiredFunc: React.PropTypes.func.isRequired
}

假如我们props不是以上类型，而是拥有复杂结构的对象怎么办？比如下面这个：

{
  text: 'hello world',
  numbers: [5, 2, 7, 9],
}

当然，我们可以直接用React.PropTypes.object,但是对象内部的数据我们却无法验证。

propTypes: {
  myObject: React.PropTypes.object,
}

进阶使用方法：shape() 和 arrayOf()

propTypes: {
  myObject: React.PropTypes.shape({
    text: React.PropTypes.string,
    numbers: React.PropTypes.arrayOf(React.PropTypes.number),
  })
}

下面是一个更复杂的Props：

[
  {
    name: 'Zachary He',
    age: 13,
    married: true,
  },
  {
    name: 'Alice Yo',
    name: 17,
  },
  {
    name: 'Jonyu Me',
    age: 20,
    married: false,
  }
]

综合上面，写起来应该就不难了：

propTypes: {
    myArray: React.PropTypes.arrayOf(
        React.propTypes.shape({
            name: React.propTypes.string.isRequired,
            age: React.propTypes.number.isRequired,
            married: React.propTypes.bool
        })
    )
}