import Item from "./item";
export default class ItemList extends React.Component{
  const itemList = data.map(item => <Item item=item />);
  render(){
    return (
      {itemList}
    )
  }
}

列表的資料我們就暫時先假設是放在一個data變數中，然後通過map函式返回一個每一項都是 的陣列，也就是說這裡其實包含了data.length個 元件，資料通過在元件上自定義一個引數傳遞。當然，這裡想傳遞幾個自定義引數都可以。

在 中是這樣的：

export default class Item extends React.Component{
  render(){
    return (
      <li>{this.props.item}</li>
    )
  }
}

在render函式中可以看出，元件內部是使用this.props來獲取傳遞到該元件的所有資料，它是一個物件，包含了所有你對這個元件的配置，現在只包含了一個item屬性，所以通過this.props.item來獲取即可。

defaultProps

在元件中，我們最好為props中的引數設定一個defaultProps，並且制定它的型別。比如，這樣：

Item.defaultProps = {
  item: 'Hello Props',
};

Item.propTypes = {
  item: PropTypes.string,
};

關於propTypes，可以宣告為以下幾種型別：

optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,

state

一個元件的顯示形態可以由資料狀態和外部引數所決定，外部引數也就是props，而資料狀態就是state。

export default class ItemList extends React.Component{
  constructor(){
    super();
    this.state = {
      itemList:'一些資料',
    }
  }
  render(){
    return (
      {this.state.itemList}
    )
  }
}

首先，在元件初始化的時候，通過this.state給元件設定一個初始的state，在第一次render的時候就會用這個資料來渲染元件。

setState

state不同於props的一點是，state是可以被改變的。不過，不可以直接通過this.state=的方式來修改，而需要通過this.setState()方法來修改state。
比如，我們經常會通過非同步操作來獲取資料，我們需要在didMount階段來執行非同步操作：

componentDidMount(){
  fetch('url')
    .then(response => response.json())
    .then((data) => {
      this.setState({itemList:item});  
    }
}

當資料獲取完成後，通過this.setState來修改資料狀態。
當我們呼叫this.setState方法時，React會更新元件的資料狀態state，並且重新呼叫render方法，也就是會對元件進行重新渲染。

注意：通過this.state=來初始化state，使用this.setState來修改state，constructor是唯一能夠初始化的地方。

prop和state的區別

1. state是元件自己管理資料，控制自己的狀態，可變；
2. props是外部傳入的資料引數，不可變；
3. 沒有state的叫做無狀態元件，有state的叫做有狀態元件；
4. 多用props，少用state。也就是多寫無狀態元件。