<!-- 准备好一个容器 -->
<div id="test"></div>
<!-- 引入核心库 React对象 -->
<script src="../js/react.development.js"></script>
<!-- 引入react-dom， 用于支持react操作dom -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入babel, 用于将jxs转为js -->
<script src="../js/babel.min.js"></script>
<script type="text/babel">
//1. 创建类式组件
class Weather extends React.Component{
//初始化状态
state = {isHot:true}
render() {
const {isHot} = this.state
return <h1 id="title" onClick={this.changeWeather}>今天天气很{isHot ? "炎热":"凉爽"}</h1>
}
//自定义方法： 要用赋值语句的形式 + 箭头函数
changeWeather = ()=>{
console.log(this);
//箭头函数没有自己的this, 它会找外侧函数的this做为箭头函数自己的this
let isHost = this.state.isHot;
//注意： 状态(state)不可以直接更改（React不认）， 要借助一个内置的API setState 如下：
this.setState({isHot:!isHost})
}
}
ReactDOM.render(<Weather/>,document.getElementById("test"))
</script>State应用总结：
1> state 是组件对象最重要的属性，值是对象(可以包含多个key-value的组合)
2> 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
注意：
1. 组件中render方法中的this为组件实例对象
2. 组件中自定义的方法中 this 为undefined？如何解决？
a. 强制绑定 this, 通过函数对象的bind();
b. 赋值 + 箭头函数
3. 状态数据： 不能直接修改或者更新，通过setState方法
当更新State属性值时，render会再次渲染
以下为非简化用法，需要在类中的constructor方法中为每一个方法重新绑定this(类中的方法存储在原型对象上，事件绑定是这个方法，里面的this为undefined)
//1. 创建类式组件
class Weather extends React.Component{
constructor(props){
super(props);
this.state = {isHot:true}
this.changeWeather = this.changeWeather.bind(this);
//改变this.changeWeather函数的this为当前实例对象
}
//render调用几次？ 1 + n 次 1是初始化的那次，n是每次更新状态时的值
render() {
const {isHot} = this.state
return <h1 id="title" onClick={this.changeWeather}>今天天气很{isHot ? "炎热":"凉爽"}</h1>
//注意：{clickTitle} -- 渲染时返回一个方法 不是 {clickTitle() -- 渲染时会执行函数，
返回undefined}
//onClick : 不是onclick
}
changeWeather(){
//changeWeather放在哪里？---Weather的原型对象上， 供实例使用
//由于changerWeather是作为onClick的回调(通过this找到，非直接调用); 所以不是通过实例调用的，
是直接调用
//类中的方法默认开启了局部的严格模式, 所以changeWeather中的this为undefined;
//console.log(this); //undefined
// console.log("标题被单击了");
let isHost = this.state.isHot;
// this.state.isHot = !this.state.isHot; //直接更改
//console.log(this.state.isHot);
//严重注意： 状态(state)不可以直接更改（React不认）， 要借助一个内置的API setState 如下：
this.setState({isHot:!isHost})
}
}
ReactDOM.render(<Weather/>,document.getElementById("test"))