我當初最開始學習react的時候，一直搞不明白props和state的區(qū)別。我看別人的todo代碼的時候，我一直以為props和state它們是同一種生物，他們有著相同的功能，但是他們卻以不同的形式出現(xiàn)。

我也詢問了前輩，前輩告訴我一個只可讀，一個可讀可寫。

當然，我一頭霧水。

但是還好，經(jīng)過我多次深入的研究，我終于理解了props和state的區(qū)別了。

props

function Hello(props){
    return <div>hello world  +  {props.name}</div>
}

React.render(
    <Hello name="zhangshan"/>,
    document.getElementById('app')
)

<Hello name="zhangshan"/>,是什么意思？

為什么我們在方法里面獲取的數(shù)據(jù)是{props.name}里面獲取到我們傳遞的name的？

其實就是我們把參數(shù)name="zhangshan" 放在了props里，props這個東西不需要我們定義，這個是react里面就存在的一個東西，專門用來存放我們的要傳遞的參數(shù)的。

但是在我們的function Hello(props){里面，必須顯式地傳入我們的props。

那如果要傳遞很多參數(shù)呢？

function Hello(props){
    return <div>hello world  +  {props.name} + {props.id}</div>
}

React.render(
    <Hello name="zhangshan" id={12}/>,
    document.getElementById('app')
)

相當于，我們把name和id都放入了props里面。props里面到底能夠容納多少的參數(shù)，目前我們不考慮。

但是我們發(fā)現(xiàn)id={12}，這個參數(shù)的樣式跟到我們的name="zhangshan"不一樣，為什么呢？

id我們需要傳入的是一個數(shù)字，所以我們不能用分號，如果我們用分號的話id=“12”，那么12就是一個字符串了。

最后還有一個很重要的點：props是只讀的

什么是只讀呢？

意思是任何修改props里面參數(shù)的操作，都是錯誤的！例如下面：

function Hello(props){
    props.name="lisi"
    return <div>hello world  +  {props.name} + {props.id}</div>
}

（題外話：這里我們用到的是function方式創(chuàng)建的Hello組件，下面我們要有class類的方式來創(chuàng)建我們的Hello組件）

this.props

好奇怪，怎么又有了this.props？

class Hello extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        return <div>hello world + {this.props.name} + {this.props.age}</div>
    }
}

this.props和props其實是一樣性質(zhì)的，他們只是在不同的地方有著不同的用法。

在class類創(chuàng)建的組件里面。如果我們要傳遞參數(shù)，那么我們就必須使用this.props這種寫法，

并且，我們還必須在constructor以及super里面顯式地傳遞入我們的props。

state

首先state是私有的數(shù)據(jù)對象，只會存在class類創(chuàng)建的組件里面

class Hello extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      msg: '這是 Hello2 組件的私有msg數(shù)據(jù)',
    }
  }
   render() {
    return 
      <h5>{this.state.msg}</h5>
   }
}

同理，如果我們要用state的話，也是通過this.state來調(diào)用state里面的數(shù)據(jù)。

但是與props不一樣的是，state是可讀可寫的。