组件实例三大属性 state,props,refs
state
<script type="text/babel">
//创建类式组件
class Weather extends React.Component {
//构造器调用几次? --- 1次
constructor(props) {
console.log("constructor")
super(props)
this.state = {
isHot:false,
wind:"威风"
}
//解决changeWeather中this指向问题
this.changeWeather = this.changeWeather.bind(this)
}
//render调用几次? --- 1+n次,1是初始化的那次,n是状态更新的次数
render(){
console.log("render")
const {isHot} = this.state;
return <h1 id="title" onClick={this.changeWeather}>今天天气很{isHot ? "炎热" : "凉爽"}</h1>
}
//changeWeather调用几次? --- 点几次调用几次
changeWeather(){
console.log("changeWeather")
//changeWeather放在哪里? --- Weather的原型对象上,供实例使用
//通过Weather实例调用changeWeather时,changeWeather中的this就是Weather实例
//由于changeWeather是作为onClick的回调,所以不是通过实例调用的,是直接调用。
//类中的方法默认开启了局部的严格模式,所以changeWeather中的this为undefined
console.log(this.state.isHot);
//获取原来的isHot值
const isHot = this.state.isHot;
//严重注意:状态(state)不可直接更改,下面这行就是直接更改!!!
//this.state.isHot = !isHot//这是错误的写法
//严重注意:状态(state)必须通过setState进行修改
this.setState({isHot:!isHot})
}
}
ReactDOM.render(<Weather/>,document.getElementById("test"))
const title = document.getElementById("title");
</script>