1.定义：state 是组件对象最重要的属性高，值是对象（可以包含多个key-value的组合），通过更新组件的state 来更新对应的页面显示（重新渲染组件）
2.标准写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>state 标准写法</title>
</head>
<body>
<div id="day"></div>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script type="text/babel">
class Weather extends React.Component {
// 构造器constructor中的参数是要靠new Weather时传的数据定义的，如果不知道传什么值就写props
constructor(props){
// 构造器调用几次? -- 1次
console.log('constructor')
super(props)
// 初始化状态
this.state = { isHot:true }
// 解决changeWeather指向问题
this.changeWeather = this.changeWeather.bind(this)
}
render() {
// render调用几次? -- 1+n次
console.log('render')
// 可以将数据解构出来
const { isHot } = this.state
return <h1 onClick={ this.changeWeather }>今天天气很{isHot ? '炎热':'凉爽'}</h1>
}
changeWeather(){
// changeWeather调用几次? -- 点几次调用几次
console.log('changeWeather')
// changeWeather放在了哪里?--Weathher 的原型对象上,供实例使用
// 由于changeWeather作为onClick的回调,所以不是通过实例调用的,是直接调用
// 类中的方法默认开启了局部的严格模式,所以changeWeather中的this为undefined
const isHot = this.state.isHot
// 严重注意:状态必须通过setState进行更新,且个更新是一种合并
this.setState({isHot : !isHot})
// 严重注意:状态(state)不可直接更改,下面这行就是直接更改
// this.state.isHot = !isHot //错误写法
console.log(this.state.isHot);
}
}
ReactDOM.render(<Weather />,document.getElementById('day'))
</script>
</body>
</html>3.简写代码部分（我把注释和console输出删掉了，方便大家对比）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类数式组件</title>
</head>
<body>
<div id="day"></div>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script type="text/babel">
class Weather extends React.Component {
// 初始化状态
state = { isHot:true }
render() {
const { isHot } = this.state
return <h1 onClick={ this.changeWeather }>今天天气很{isHot ? '炎热':'凉爽'}</h1>
}
// 自定义方法--要用赋值语句的形式+箭头函数
changeWeather=()=>{
const isHot = this.state.isHot
this.setState({isHot : !isHot})
}
}
ReactDOM.render(<Weather />,document.getElementById('day'))
</script>
</body>
</html>4.实现效果：
