react中的state

state

state：状态
作用：存储数据
react中的组件分为函数式组件和类组件
函数式组件没有状态
类组件有状态
状态就是类组件上的一个属性

state在构造函数中进行初始化

class MyComponent extends React.Component{
        // 构造函数
        constructor(props){
            super(props);
			//state写在构造函数中
            this.state={
                isOpen:false,
                address:"故宫"
            }
            // 让changeStatus的this指向MyComponent
            this.changeStatus=this.changeStatus.bind(this);
        }
        render(){
            const{isOpen,address}=this.state
            return (
                <div>
                    <h1>今天的景点{isOpen?'营业':'不营业'},地点是{address}</h1>
                    <button onClick={this.changeStatus}>改变现状</button>
                </div>
            )
        }
        changeStatus(){
            // 这里的this本来指向undefined，在构造函数中改变了this的指向
            const isOpen = this.state.isOpen;
            this.setState({
                isOpen:!isOpen
            })
        }
    }
    ReactDOM.render(<MyComponent/>,document.getElementById('test'))

state的简写形式

class MyComponent extends React.Component{
    // 初始化state，简写形式
    state={
        isOpen:false,
        address:'故宫'
    }
    // 生成jsx
    render(){
        const{isOpen,address}=this.state
        return (
            <div>
                <h1>今天的景点{isOpen?'营业':'不营业'},地点是{address}</h1>
                <button onClick={this.changeStatus}>改变现状</button>
            </div>
        )
    }
    // 箭头函数中的this指向MyComponent，不必再改变this指向
    changeStatus=()=>{
        this.setState({
            isOpen:!this.state.isOpen
        })
    }
}
ReactDOM.render(<MyComponent/>,document.getElementById('test'))