React学习笔记（2）—— React组件、参数及状态的使用

组件
react组件的基本写法如下：

class 自定义名字 extends React.Component{
	render {
		return 要渲染的html内容
	}
}

注意：自定义的名字，必须首字母大写，否则虽然不会报错，自定义标签也不会进行渲染

比如定义一个名字为Huz的组件，显示一个红颜色的"hello react"标签，写法如下：

// 继承react的组件
class Huz extends React.Component{
    render() {
        return <div>
                    <span style={{color: 'red'}}>hello react</span>
                </div>
    }
}
// 将Huz组件挂载到id为app的标签下     
ReactDOM.render(<Huz/>, app)

参数
组件的标签设置属性，可以在该组件的render函数中，通过this.props获取到所有的属性和对应属性的值（通过标签传进来的属性值，只能读取，不能改变），基本示例如下：

class Title extends React.Component {
    render() {
        return (
            <div>
                <span>{this.props.msg}</span>
            </div>
        )
    }
}
ReactDOM.render(<Title msg="hello moto"/>, app)

这里msg的值是只读的，无法修改。假如我们修改一下msg的值，看看会发生什么：

class Title extends React.Component {
    render() {
        return (
            <div>
                <span>{this.props.msg}</span>
                <br/>
                <button onClick={this.changeval.bind(this)}>change</button>
            </div>
        )
    }
    changeval() {
        this.props.msg = "change value"
    }
}
ReactDOM.render(<Title msg="hello moto"/>, app)

点击一下click，控制台立马报错：

提示无法给只读属性“msg”赋值

状态
如果需要动态修改属性值，我们可以用到state，示例如下：

class Huz extends React.Component{
    constructor() {
        super()
        this.state = {
            msg: 'hello react'
        }
    }
    render() {
        console.log(this)
        return <div>
                    <input type="button" value="改变" onClick={this.changeval.bind(this)}/>
                    <br/>
                    <span style={{color: 'red'}}>state.msg: {this.state.msg}</span>
                </div>
    }
    changeval() {
        // this.state.msg = 'changed value' // 改变了msg的值，但不会重新渲染页面
        // 改变
        this.setState({
            msg: 'changed value'
        })
    }
}     
ReactDOM.render(<Huz/>, app)

注意：
1，这里改变state.msg的值需要用到setState函数，不能直接通过赋值语句来修改，通过赋值语句修改不会自动重新渲染页面
2，setState会在合适的时机异步的去修改state的值，并不是立马修改的