React系列-组件实例的三大属性（state）

对State的理解

一个组件的显示形态可以由内部数据状态和外部参数所决定，外部参数也就是props，而内部数据状态就是state。

事件绑定

• 事件名称以及调用方式的变化：
  onclick -> onClick
  onblur -> onBlur

onClick={demo()}  //错误，因为这是直接调用语句，只是把demo()的返回值复制给了onClick
onClick={demo}  //正确，这样是属于指定函数名称，在事件发生时再去调用函数

• 严格模式下，自定义函数中的this为undefined（禁止指向window）

class Weather extends React.component{
	render(){
	    const {isHot} = this.state;
		return <h1 onClick={this.changeWeather}>今天天气很{isHot?'炎热':'凉爽'}</h1>
	}
	changeWeather(){
      console.log(this.state.isHot)
      //将打印：undefined
      //通过weather实例调用changeWeather时
      //changeWeather中的this就是weather实例
      //由于changeWeather作为onClick,所以不是通过实例调用的，而是直接调用的
      //类中的方法默认开启了局部的严格模式
      //所以changeWeather中的this为undefined
    }
}
//解释:为什么为直接调用而不是实例调用
const x=p1.study;   
//如果是p1.study(),则是将study函数的返回值赋给了x
//而现在属于是将study的引用赋给了x，study函数的原名称(引用)是study
//现在相当于是给study函数又增加了一个引用，为x
x();  //所以该行代码是直接调用，相当于study()

类中所有定义的方法，已经在局部开启了严格模式

解决类中this指向问题

class Weather extends React.component{
  constructor(props){
	super(props);
	//解决changeWeather中this指向问题
	this.changeWeather=this.changeWeather.bind(this);	
  }
}

setState的使用

严重注意：状态的数据不能直接更改，必须通过setState去更改
在整个组件运行状态中：
构造器调用几次？——1次
render调用1+N次，N是状态更新的次数
在构造器中一般做两件事：1、初始化状态，2、解决this指向问题

state的简写方式

class Car{
  //初始化状态
  //类中可以写赋值语句，如下代码的含义是给car的实例对象添加一个属性，名为a,值为1 
  a=1;
  //自定义方法 -> 要赋值语句的形式+箭头函数
  changeWeather=()=>{
    const isHot=this.state.isHot;
    this.setState({isHot:!isHot})
  }
  //箭头函数没有自己的this,要向外层找
}

总结state

1. state是组件中最重要的属性，值是对象，可以包含多个（key-value）的组合
2. 组件被称为“状态机”，通过更新组件的state来更新对应的页面显示
   强烈注意：
   1. 组件ender方法中的this为组件实例对象
   2. 组件自定义方法中的this为undefined，如何解决？
      a. 强制绑定this，通过函数对象的bind()
      b. 箭头函数
   3. 状态数据不能直接修改或更新