類型檢查

• defaultProps 默認屬性值
• propTypes 限制接收的屬性類別(僅在開發(fā)模式中檢測)

基本寫法

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

• 使用 `isRequired' 鏈接上述任何一個，以確保在沒有提供 prop 的情況下顯示警告。

• defaultProps 設置默認屬性

//類型檢測
TodoItem.propTypes = {
    content: PropTypes.string,
    deleteItem: PropTypes.func,
    index: PropTypes.number,
    // 你可以使用 `isRequired' 鏈接上述任何一個，以確保在沒有提供 prop 的情況下顯示警告。
    test: PropTypes.string.isRequired
}

//設置默認值
TodoItem.defaultProps = {
    test: '科比布萊恩特'
}

• 某種類型之一

 // 一個對象可以是多種類型其中之一
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ]),

props，state與render函數的關系

• 當組件的state或者props發(fā)生改變時，render函數就會重新執(zhí)行（自身）
• 當父組件的render函數執(zhí)行時，它的子組件的render都將被重新執(zhí)行