react组件状态

事件

• 注意：组件事件需要配合状态
• 事件需要写成onClick，否则react不认识
• 事件接收的是一个函数，或者是函数变量，所以需要使用{ }
• 在调用方法时，需要指定this指向，如果不指定的话就是underfind,需要使用es6中的bind进行this绑定。
• 点击完成后，页面还不会重新渲染，因为现在a是在属性中的。只有state发生改变的时候才能会触发重新渲染。

class Cmp extends React.Component{
    constructor(...args){
        super(...args)
        this.a = 12
    }
    fn(){
        this.a = this.a+1;
    }
    render(){
        return (
            <div>
                <span>{this.a}</span>
                <input type="button" value="按钮" onClick={this.fn.bind(this)} />
            </div>
        )
    }
}
ReactDOM.render(<Cmp></Cmp>,document.getElementById('root'))

状态设置与改变

• 状态的初始化只能在constructor中进行。
• 如果在方法中直接修改state中的值的话，state中的值是会进行改变，但是不会触发渲染，只有使用setState才能触发渲染，下面代码中点击按钮1触发fn方法时，state中的a会加1但不会渲染。只有点击按钮2才会渲染。

class Cmp extends React.Component{
    constructor(...args){
        super(...args)
        this.state = {
            a:12
        }
    }
    fn(){
        //只改变state中的值但不会触发渲染
        this.state.a = this.state.a+1;
        console.log(this.state.a)
    }
    fn2(){
        //状态的设置必须要使用setState，否则不会触发渲染
        this.setState({
            a:this.state.a+1
        })
        console.log(this.state.a)
    }
    
    render(){
        //input可以使用单标签，此处是为了markdown代码高亮
        return (
            <div>
                <span>{this.state.a}</span>
                <input type="button" value="按钮1" onClick={this.fn.bind(this)}></input>
                <input type="button" value="按钮2" onClick={this.fn2.bind(this)} ></input>
            </div>
        )
    }
}
ReactDOM.render(<Cmp></Cmp>,document.getElementById('root'))

props变化引起重新渲染

• props中传递的值在组件中时不能进行修改的，浏览器会报错。因为它是一个自读的

Uncaught TypeError: Cannot assign to read only property 'a' of object '#<Object>'

class Cmp extends React.Component{
    constructor(...args){
        super(...args)
    }
    fn(){
        this.props.a = this.props.a+1;
    }
    render(){
        return (
            <div>
                <span>{this.props.a}</span>
                <input type="button" value="按钮1" onClick={this.fn.bind(this)} ></input>
            </div>
        )
    }
}

• 只有父级在传值发生改变的时候才会进行修改，下面代码中点击按钮1触发fn，通过改变父级state中的text值，而触发渲染。

class Parent extends React.Component{
    constructor(...args){
        super(...args)
        this.state={
            text:12
        }
    }
    fn(){
        this.setState({
            text:this.state.text + 1
        })
    }
    render(){
        return (
            <div>
                <Child text={this.state.text}></Child>
                <input type="button" value="按钮1" onClick={this.fn.bind(this)} ></input>
            </div>
        )
    }
}
class Child extends React.Component{
    constructor(...args){
        super(...args)
    }
    render(){
        return (
            <div>{this.props.text}</div>
        )
    }
}
ReactDOM.render(<Parent></Parent>,document.getElementById('root'))

react触发渲染的三种情况

1. state使用setStates时；
2. props传值发生改变时；
3. 强制渲染调用this.forceUpdate()

class Cmp extends React.Component{
    constructor(...args){
        super(...args)
        this.a = 12
    }
    fn(){
        this.a = this.a+1;
        //强烈不建议使用，会严重的影响性能以及一些不可预知的错误。
        this.forceUpdate()
    }
    render(){
        return (
            <div>
                <span>{this.a}</span>
                <input type="button" value="按钮1" onClick={this.fn.bind(this)} ></input>
            </div>
        )
    }
}
ReactDOM.render(<Cmp a = {12}></Cmp>,document.getElementById('root'))