07组件中的state属性

以前没有组件化的时候重新渲染数据要写一个render函数，然后每次渲染都是执行这个函数，渲染新的模板。

组件化之后：state属性是一个对象，类似Vue中的data属性一样存值，当state中的数据改变就会重新渲染页面。

初始代码：

class Count extends React.Component {
    handleAddOne() {
        console.log("+1")
        console.log(this)
    }
    handleMinusOne() {
        console.log("-1")
    }
    handleReset() {
        console.log("重置")
    }
    render() {
        return (
            <div>
                <h1>Count: </h1>
                <button onClick={this.handleAddOne}>+</button>
                <button onClick={this.handleMinusOne}>-</button>
                <button onClick={this.handleReset}>重置</button>
            </div>
        )
    }
}
ReactDOM.render(<Count />, document.getElementById("app"));

在事件中的this指向有问题，因为经过babel编译后都是严格模式，this指向undefined。

使用constructor修正后：

class Count extends React.Component {
    constructor(props) {
        super(props);
        this.handleAddOne = this.handleAddOne.bind(this);
        this.handleMinusOne = this.handleMinusOne.bind(this);
        this.handleReset = this.handleReset.bind(this);
    }
    handleAddOne() {
        console.log("+1")
        console.log(this)
    }
    handleMinusOne() {
        console.log("-1")
    }
    handleReset() {
        console.log("重置")
    }
    render() {
        return (
            <div>
                <h1>Count: </h1>
                <button onClick={this.handleAddOne}>+</button>
                <button onClick={this.handleMinusOne}>-</button>
                <button onClick={this.handleReset}>重置</button>
            </div>
        )
    }
}
ReactDOM.render(<Count />, document.getElementById("app"));

指向Count实例。

state的首次使用：

class Count extends React.Component {
    constructor(props) {
        super(props);
        this.handleAddOne = this.handleAddOne.bind(this);
        this.handleMinusOne = this.handleMinusOne.bind(this);
        this.handleReset = this.handleReset.bind(this);
        this.state = {
            count:0
        }
    }
    handleAddOne() {
        console.log("+1")
        console.log(this)
    }
    handleMinusOne() {
        console.log("-1")
    }
    handleReset() {
        console.log("重置")
    }
    render() {
        return (
            <div>
                <h1>Count: {this.state.count}</h1>
                <button onClick={this.handleAddOne}>+</button>
                <button onClick={this.handleMinusOne}>-</button>
                <button onClick={this.handleReset}>重置</button>
            </div>
        )
    }
}
ReactDOM.render(<Count />, document.getElementById("app"));

改变state的值
在事件中可以使用this.setState方法修改state的内容。方法中写一个函数，函数中return对象。return中的对象只会改变对应的值，不会改变其他数据。

handleAddOne() {
        this.setState((prevState) => {
            return {
                count: prevState.count + 1
            }
        })
        console.log(this.state)
    }

默认事件参数prevState可以把上一个state的内容存入，修改即可。

其他用法：
以前可以在setState中直接传一个对象，但是不推介。
setState是一个异步，如果直接传对象容易出问题，数据还没回来就执行了下面的内容。如果用函数，数据还没有回来可以穿到默认的prevState中。

handleReset() {
        this.setState({
            count: 0
        })
    }