一、區別：
props和state之間是緊密相關的。父元件的state常常轉變子元件的props成下面我們通過一個父子元件從上至下來分析它們。
假如我們有個父元件，可以在父元件的state裡定義子元件的資料比如：

this.setState({ childData: ‘Child Data’ });

緊接著，在父元件的render()方法裡面，可以將父元件的state，作為子元件的props傳遞下去，如下

這樣就可以父元件的state傳遞給子元件的props。從子元件的角度來看，props是不可變的。如何改變子元件的props？我們僅僅需要改變父元件內部的state即可，父元件的state改變之後，引起父元件重新渲染，在渲染的過程中，子元件的data變成父元件this.state.childDtat的值。這樣父元件內部state改變，就會引起子元件的改變。這樣就形成裡從上而下的資料流，也就是React常說的單向資料流，這個“向”是向下。我們常常利用這個原理更新子元件，從而衍生出一種模式，父元件：處理複雜的業務邏輯、互動以及資料等。子元件：稱它為Stateless元件即無狀態元件，只用作展示。在我們開發過程中，儘可能多個使用無狀態元件，可以縷清業務之間的邏輯關係,提高渲染效率。
如果子元件想要改變自身的data，這時候需要，父元件傳遞給子元件一個方法，改變父元件自身的state。
父元件：

子元件接收父元件方法

let Chilid = ({data,handleChange}) =>

{data.name}
二、總結
==props：==一般用於父元件向子元件通訊，在元件之間通訊使用。
==state：==一般用於元件內部的狀態維護，更新組建內部的資料，狀態，更新子元件的props等。
三、完整的程式碼
父元件
import React, {Component} from ‘react’;
import Child from ‘./components/child’
class App extends Component {
constructor(props) {
super(props);
this.state = {
childData: {name: ‘child’}
};
this.handelChildChange = this.handelChildChange.bind(this);
}
handelChildChange(){
this.setState({
childData: {name: ‘newChild’}
})
}
render() {
return (



);
}
}
export default App;
子元件:這裡使用無狀態元件，解構賦值以及無狀態元件使用父元件方法

import React from ‘react’;
let Chilid = ({data,handleChange}) =>

{data.name}
export default Chilid