props
React的核心思想就是組件化思想，頁面會被切分成一些獨立的、可復用的組件。
組件從概念上看就是一個函數，可以接受一個參數作為輸入值，這個參數就是props，所以可以把props理解為從外部傳入組件內部的數據。由於React是單向數據流，所以props基本上也就是從服父級組件向子組件傳遞的數據。
用法
假設我們現在需要實現一個列表，根據React組件化思想，我們可以把列表中的行當做一個組件，也就是有這樣兩個組件：<ItemList/>和<Item/>。
先看看<ItemList/>
import Item from "./item";
export default class ItemList extends React.Component{
const itemList = data.map(item => <Item item=item />);
render(){
return (
{itemList}
)
}
}
列表的數據我們就暫時先假設是放在一個data變量中，然后通過map函數返回一個每一項都是<Item item='數據'/>的數組，也就是說這里其實包含了data.length個<Item/>組件，數據通過在組件上自定義一個參數傳遞。當然，這里想傳遞幾個自定義參數都可以。
在<Item />中是這樣的：
export default class Item extends React.Component{
render(){
return (
<li>{this.props.item}</li>
)
}
}
在render函數中可以看出，組件內部是使用this.props來獲取傳遞到該組件的所有數據，它是一個對象，包含了所有你對這個組件的配置，現在只包含了一個item屬性，所以通過this.props.item來獲取即可。
只讀性
props經常被用作渲染組件和初始化狀態，當一個組件被實例化之后，它的props是只讀的，不可改變的。如果props在渲染過程中可以被改變，會導致這個組件顯示的形態變得不可預測。只有通過父組件重新渲染的方式才可以把新的props傳入組件中。
默認參數
在組件中，我們最好為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,
總結
props是一個從外部傳進組件的參數，主要作為就是從父組件向子組件傳遞數據，它具有可讀性和不變性，只能通過外部組件主動傳入新的props來重新渲染子組件，否則子組件的props以及展現形式不會改變。
state
state是什么呢？
State is similar to props, but it is private and fully controlled by the component.
一個組件的顯示形態可以由數據狀態和外部參數所決定，外部參數也就是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是唯一能夠初始化的地方。
setState接受一個對象或者函數作為第一個參數，只需要傳入需要更新的部分即可，不需要傳入整個對象，比如：
export default class ItemList extends React.Component{
constructor(){
super();
this.state = {
name:'axuebin',
age:25,
}
}
componentDidMount(){
this.setState({age:18})
}
}
在執行完setState之后的state應該是{name:'axuebin',age:18}。
setState還可以接受第二個參數，它是一個函數，會在setState調用完成並且組件開始重新渲染時被調用，可以用來監聽渲染是否完成：
this.setState({
name:'xb'
},()=>console.log('setState finished'))
總結
state的主要作用是用於組件保存、控制以及修改自己的狀態，它只能在constructor中初始化，它算是組件的私有屬性，不可通過外部訪問和修改，只能通過組件內部的this.setState來修改，修改state屬性會導致組件的重新渲染。
區別
state是組件自己管理數據，控制自己的狀態，可變；props是外部傳入的數據參數，不可變；- 沒有
state的叫做無狀態組件，有state的叫做有狀態組件； - 多用
props，少用state。也就是多寫無狀態組件。