React——03类式组件的三大核心属性之一：state

《一. state简介》

state是类式组件实例对象里的一个属性，它的值是一个对象，因为一个组件可能会有很多部分涉及到状态，要存的东西很多。

《二 . 用途》

（1）页面的元素不是一成不变的，需要改变的数据就可以存在state里面

（2）页面的改变有时候要依赖于页面的状态，即页面状态改变，会重新调用render（）渲染页面

《三 . 注意》 ：

（1）state状态里面存储的数据不可以直接更改，必须要借助一个内置的API—–> setState

《四. 借助案例深刻理解state的用法》

鼠标点击会自动在‘今天天气很炎热’和‘今天天气很凉爽’之间切换

首先在构造器中完成对状态的初始化

然后给组件绑定点击事件

写法解释 ：

1. 因为如果把绑定点击事件的函数写在ReactDOM…..后面，那在里面state属性就难以获得，所以就要写在类组件里面当做一个方法写，

2. 而且React比较推荐把 onclick 写在要绑定的标签里面的写法，但注意changeWeather后面不要加小括号，因为加了就要执行，即把执行了changeWeather方法的返回值赋给onclick

3. changeWeather是放在Weather的原型对象上，供实例使用

4. 由于changeWeather是作为onclick的回调调用的，不是通过实例调用的,是直接调用的

   所以本应该指向Window，但类中的方法默认开启了严格模式，所以 changeWeather里面的this为undefined

   相当于 ：

   class Person（）{

   study( ) {

   …..

   }

   }

const p1 = new Person( )

const x = p1 . study

x( )

5.解决 this 指向问题

改变this指向的方法有两种，一个是 call（） 一个是 bind（）

区别是 ： call（）后会直接调用该函数

bind（）后不会直接调用，而是会返回一个出了函数内部的this指向改变了（变成括号里面的）其他都

一样的一个新函数，需要一个变量接受后再调用

比如 ： function f ( ) {

……

}

var obj = { } ;

f . call ( obj ) ; //直接调用该函数

var g = f . bind ( obj ) ;

g ( ) ; // 此时才会调用

返回的新函数要作为一个属性加在实例化对象本身上

然后绑定点击事件调用返回的新函数

《五 ：state 的简写模式》

在类里面可以直接写赋值语句，不要声明（会报错），比如 直接 a = 1

把 a 添加为 类里面的内置属性，并复赋值为1