React组件三大核心属性之State

State

1. 组件最重要的属性，值是对象(可以包含多个key-val的组合)
2. 组件被称为"状态机"，通过更新组件的state来更新视图的现实(重新渲染更新的组件)

注意

• 组件中的render的this指向实例的对象
• 组件自定义的方法中的this为undefined的解决方式 01.强制绑定this，通过函数对象的bind

 this.changeState=this.changeState.bind(this)  

02.使用箭头函数

changeState=()=>{ 
                console.log('修改天气信息',this);  
                this.setState({
                    isHot:!this.state.isHot
                })
}

• 状态数据，不能直接修改或更新 错误示范❌

  this.state=!this.state.isHot  无法更新视图数据

正确示范🙆

this.setState({ isHot:!this.state.isHot })

• 类里面不需要继承父类的属性可以直接给变量赋值 state={...}
• 箭头函数没有自身的this this指向全局MyComponent实例本身

代码实例 ⬇️

class MyComponent extends React.Component{ 
        //    类里面不需要继承父类的属性可以直接给变量赋值 state={...}
            state={
                isHot:false
            }
            render(){ 
                let {isHot} =this.state 
                return (
                    <h1 onClick={this.changeState}>今天天气很{isHot?'凉爽':"炎热"}</h1>
                ) 
             }

            // 箭头函数没有自身的this this指向全局MyComponent实例本身
            changeState=()=>{ 
                console.log('修改天气信息',this);  
                this.setState({
                    isHot:!this.state.isHot
                })

            }
    
    } 
        
   ReactDOM.render(<MyComponent/>, document.getElementById("test")); // {/* // 渲染虚拟DOM到页面展示 /* */}

this打印结果