组件实例的三大属性(不包含function函数组件,只能用class类式组件，但新版本函数组件也可以玩这三大属性)
props
refs
state
人的状态影响人的行为
组件的状态驱动页面
state
//1.创建组件
class Weather extends React.Component{
constructor(props){
super(props)
//初始化状态
this.state = { isHot:true,wind:'大风' }
}
render(){
//读取状态
const {isHot,wind} = this.state; //也可以使用解构赋值
return <h1>今天天气很{this.state.isHot?'炎热':'凉爽'},今天有{this.state.wind}</h1>
}
}
ReactDOM.render(<Weather/>,document.getElementById('test') )
事件
//1.创建组件
class Weather extends React.Component{
constructor(props){
super(props)
//初始化状态
this.state = { isHot:true,wind:'大风' }
}
render(){
//读取状态
const {isHot,wind} = this.state; //也可以使用解构赋值
return <h1 onClick={this.changeWeather}>今天天气很{this.state.isHot?'炎热':'凉爽'},今天有{this.state.wind}</h1>
}
//changeWeather放在哪里？—Weather的原型对象上，供实例使用
//通过Weather实例调用changeWeather时，changeWeather里的this就是Weather实例
changeWeather(){
//由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用，
//类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined
console.log(this+"点击了test");
}
}
ReactDOM.render(<Weather/>,document.getElementById('test') )
//这两种最好不要用，少document
const title = document.getElementById('title')
title.addEventListener('click',()=>{
console.log("标题被点击了");
})
const title = document.getElementById('title')
title.onclick()=>{
console.log("标题被点击了");
}
解决changeWeather中this的指向问题
//1.创建组件
class Weather extends React.Component{
constructor(props){
super(props)
//初始化状态
this.state = { isHot:true,wind:'大风' }
//解决changeWeather中this的指向问题
this.changeWeather = this.changeWeather.bind(this)
}
render(){
//读取状态
const {isHot,wind} = this.state; //也可以使用解构赋值
return <h1 onClick={this.changeWeather}>今天天气很{this.state.isHot?'炎热':'凉爽'},今天有{this.state.wind}</h1>
}
//changeWeather放在哪里？—Weather的原型对象上，供实例使用
//通过Weather实例调用changeWeather时，changeWeather里的this就是Weather实例
changeWeather(){
//由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用，
//类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined
console.log(this+"点击了test");
}
}
ReactDOM.render(<Weather/>,document.getElementById('test') )
state状态不可直接更改，要借助内置api去更改—setState
//1.创建组件
class Weather extends React.Component{
//构造器调用几次？— 1次
constructor(props){
super(props)
//初始化状态
this.state = { isHot:true,wind:'大风' }
//解决changeWeather中this的指向问题
this.changeWeather = this.changeWeather.bind(this)
}
//render调用几次？— 1+ n 次
render(){
//读取状态
const {isHot,wind} = this.state; //也可以使用解构赋值
return <h1 onClick={this.changeWeather}>今天天气很{this.state.isHot?'炎热':'凉爽'},今天有{this.state.wind}</h1>
}
//changWeather调用几次？— 触发几次调几次
changeWeather(){
//state状态必须通过setState进行修改，且更新是一种合并，而不是替换。
const isHot = this.state
this.setState({ isHot:!isHot })
}
}
ReactDOM.render(<Weather/>,document.getElementById('test') )
state标准方式
//1.创建组件
class Weather extends React.Component{
//初始化状态
state = { isHot:true,wind:'大风' }
render(){
const {isHot,wind} = this.state;
return <h1 onClick={this.changeWeather}>今天天气很{this.state.isHot?'炎热':'凉爽'},今天有{this.state.wind}</h1>
}
//自定义方法— 要用赋值语句的形式+箭头函数
changeWeather = ()=>{
const isHot = this.state
this.setState({ isHot:!isHot })
}
}
ReactDOM.render(<Weather/>,document.getElementById('test') )
总结state
- state是组件对象中最重要的属性，值是对象(可以包含多个key-value组合)
- 组件被成为"状态机"，通过更新组件的state来更新对应的页面显示(重新渲染组件)
- 组件中render方法中的this为组件实例对象
- 组件自定义方法中this为undefined，如何解决？
(1). 强制绑定this，通过函数对象的bind()
(2). 箭头函数 - 状态数据，不能直接修改或更新，必须使用setState
