React（四）—— props与render

props是组件固有属性的集合，其数据由外部传入，一般在整个组件的生命周期中都是只读的

<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>

这个格式要很清晰了哈

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要有一个根节点并只有一个，刚才又犯错了

打印出一个对象，就是组件的属性集合{name: "React", attr: "666"}，可以调用对象的属性来取值了

props与state的区别

props不能被其所在的组件修改，从父组件传递进来的属性不会在组件内部更改；state只能在所在组件内部更改，或在外部调用setState函数对状态进行间接修改。

render函数

首先说render是一个函数，它对于组件来说，render函数是必需的。render函数的主要流程是检测this.props和this.state,再返回一个单一组件实例。

render函数应该是纯粹的，也就是说，在render函数内不应该修改组件state，不读写DOM信息，也不与浏览器交互。如果需要交互，应该在生命周期中进行交互。

内容有点少 O(∩_∩)O~