1.理解

1. 每個(gè)組件對(duì)象都會(huì)有props（properties）屬性
2. 組件標(biāo)簽的所有屬性都保存的props

2.作用

1. 通過(guò)標(biāo)簽屬性從組件外向組件內(nèi)傳遞變化的數(shù)據(jù)
2. 注意：組件內(nèi)部不要修改props數(shù)據(jù)

3.編碼實(shí)現(xiàn)

1. 內(nèi)部讀取某個(gè)屬性值
   this.props.name
2. 對(duì)props中的屬性值進(jìn)行類型限制和必要性限制
   需要引入prop-types庫(kù)

Person.propTypes = {
  name:Proptypes.string.isRequired,
  age:Proptypes.number
}

3. 擴(kuò)展屬性：將對(duì)象的所有屬性通過(guò)props傳遞

<Person {...person}/>

4. 默認(rèn)屬性值：

Person.defaultProps = {
  age:18
  sex:"male"
}

5. 組件類的構(gòu)造函數(shù)
   constructor(props){
   super(props)
   console.log(props)//打印所有屬性
   }

4.完整實(shí)現(xiàn)

    //1.創(chuàng)建組件
    class Person extends React.Component{
        //對(duì)props進(jìn)行限制（需先引入依賴包），傳入的類型不符合限制，會(huì)出warning
        // 加static關(guān)鍵字會(huì)將屬性加在類本身上，不加會(huì)寫在類的實(shí)例對(duì)象上
        static propTypes = {
            age: PropTypes.number,
            name : PropTypes.string.isRequired,
            speak : PropTypes.func
        } 
        //指定默認(rèn)的標(biāo)簽屬性值
        static defaultProps = {
            sex:"不男不女",
            age:18
        }
        //render方法
        render(){
            const{name,age,sex}= this.props
            return(
                <ul>
                    <li>姓名：{name}</li>
                    <li>性別：{sex}</li>
                    <li>年齡：{age+1}</li>
                </ul>
            )
        }
    }
  
    // 2.渲染
    // 此處的年齡18 用大括號(hào)是引用了js語(yǔ)法，如果直接傳數(shù)值而不加大括號(hào)，react無(wú)法識(shí)別
    ReactDOM.render(<Person name= "jerry" age= {18} sex="male" speak = {speak}/>,document.getElementById("test"))

    const p = {name: "Lily",age:18,sex:"female"} 
    ReactDOM.render(<Person {... p }/>,document.getElementById("test2"))

    function speak() {
        console.log ("俺會(huì)說(shuō)話")
    }