（三）React组件的三大特性 State
React组件的三大特性 State
了解State的使用：（通过原理）
展示state里面的this指向问题(做参考 实际是简写方式)
这是一个修改天气的案例，使用state存储状态，在展示的地方进行获取展示，然后在更新状态的时候是怎么一个的状态，render调用几次，在声明方法的时候是怎么的格式。以及相关的this的指向。
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,wind} = this.state
return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
}
//changeWeather调用几次？ ———— 点几次调几次
changeWeather(){
//changeWeather放在哪里？ ———— Weather的原型对象上，供实例使用
//由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用
//类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined
console.log('changeWeather');
//获取原来的isHot值
const isHot = this.state.isHot
//严重注意：状态必须通过setState进行更新,且更新是一种合并，不是替换。
this.setState({isHot:!isHot})
console.log(this);
//严重注意：状态(state)不可直接更改，下面这行就是直接更改！！！
//this.state.isHot = !isHot //这是错误的写法
}
}
//2.渲染组件到页面
ReactDOM.render(<Weather/>,document.getElementById('test'))
总结：
就是在使用jsx书写相关的事件的时候，定义的回调方法就是放在类里面的 但是不是实例对象进行调用的，因为你在使用的是时候，不是写的new 一个类 而是react的去声明使用的，所以是调用不到的（自己理解就是 你类里面的这个方法没有挂载到实例上面 所以里面的this指向是没有指向到实例对象的）
解决方案是啥 就是在你写的是这个组件（类里面） this.changeWeather = this.changeWeather.bind(this) 通过这种方法进行挂载 或者说就是通过改变去修改this的指向问题
state的作用就是进行储存状态 暂且可以理解为vue的data 但是在修改的时候需要 写 this.setState( { } ) 进行修改相应的数据 所有才会有上面说的方法this获取不到实例对象
但是在 render 里面是可以直接 this.state. 得到相应的数据的
后面要写简写模式 不要很麻烦
上述产生的问题就是this的指向问题，你的这个点击事件的方法本身不是自己new出来的，所以拿不到。但是给了一个解决方案，但是后期采用简写方法就不会出现这个问题。
state的简写方式
要注意的点 类里面的方法
//自定义方法————要用赋值语句的形式+箭头函数 （复习箭头函数 匿名函数）
简写方式就是改成了赋值的方法 ，之前的方式写的方法是放在的了原型上边，this指的不是实例，改成赋值方法 然后用箭头函数的形式 因为箭头函数没有this 所以指向可以
//1.创建组件
class Weather extends React.Component{
//初始化状态
state = {isHot:false,wind:'微风'}
render(){
const {isHot,wind} = this.state
return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
}
//自定义方法————要用赋值语句的形式+箭头函数
changeWeather = ()=>{
const isHot = this.state.isHot
this.setState({isHot:!isHot})
}
}
//2.渲染组件到页面
ReactDOM.render(<Weather/>,document.getElementById('test'))
理解：
1.state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
2.组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
强烈注意：
1.组件中render方法中的this为组件实例对象
2.组件自定义的方法中this为undefined，如何解决？
a.强制绑定this: 通过函数对象的bind()
b.箭头函数
3.状态数据，不能直接修改或更新 只能使用setState
