props是組件固有屬性的集合，其數(shù)據(jù)由外部傳入，一般在整個(gè)組件的生命周期中都是只讀的

<input type="text" />

上方HTML 在 HTML語言中，type稱之為屬性，而在React中屬性稱之為prop

<script type="text/babel">
class HelloComponent extends React.Component{
    render(){
        return (
            <h1>Hello</h1>
        )
    }
}
ReactDOM.render(<HelloComponent/>,document.getElementById('div'))
</script>

這個(gè)格式要很清晰了哈

class HelloComponent extends React.Component{
    render(){
        return (
            <h1>Hello,{this.props.attr,this.props.name}</h1>
        )
    }
}

ReactDOM.render(<HelloComponent name="React" attr="666"/>,document.getElementById('div'))

組件的屬性集合即是React的props，可以打印一下看看props

    class HelloComponent extends React.Component{
        constructor(props){
            super(props)
            this.handleClick = this.handleClick.bind(this)
        }
        handleClick(){
            console.log(this.props)
        }
        render(){
            return (
                <div>
                    <h1>Hello,{this.props.attr,this.props.name}</h1>
                    <button onClick={this.handleClick}>GET</button>
                </div>
            )
        }
    }

ReactDOM.render(<HelloComponent name="React" attr="666"/>,document.getElementById('div'))

注意一下，render的return要有一個(gè)根節(jié)點(diǎn)并只有一個(gè)，剛才又犯錯(cuò)了

打印出一個(gè)對(duì)象，就是組件的屬性集合{name: "React", attr: "666"}，可以調(diào)用對(duì)象的屬性來取值了

props與state的區(qū)別

props不能被其所在的組件修改，從父組件傳遞進(jìn)來的屬性不會(huì)在組件內(nèi)部更改；state只能在所在組件內(nèi)部更改，或在外部調(diào)用setState函數(shù)對(duì)狀態(tài)進(jìn)行間接修改。

render函數(shù)

首先說render是一個(gè)函數(shù)，它對(duì)于組件來說，render函數(shù)是必需的。render函數(shù)的主要流程是檢測this.props和this.state,再返回一個(gè)單一組件實(shí)例。

render函數(shù)應(yīng)該是純粹的，也就是說，在render函數(shù)內(nèi)不應(yīng)該修改組件state，不讀寫DOM信息，也不與瀏覽器交互。如果需要交互，應(yīng)該在生命周期中進(jìn)行交互。

內(nèi)容有點(diǎn)少 O(∩_∩)O~