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
        })
    )
}