前端框架react----state、setState、样式、this指向

目录

一、state

二、this的指向问题

三、setState

四、设置样式

---

一、state

之所以说普通函数创建的组件是无状态组件，而通过 class 创建的组件是有状态组件，就是因为在 class 中 state 的存在。

state叫状态，举个例子：

人---状态---影响---行为

组件---状态----驱动----页面

注意：

1、在constructor中初始化state。

2、为了提高页面 的渲染效率，不要将不需要在页面中展示的数据添加到state中，直接添加给this即可。

3、默认情况下，state的值为null。

4、state可以修改。

二、this的指向问题

关于this的指向问题我们先看下面的代码。

---changeWeather 方法在类的原形对象上，供Weather实例调用，

---通过Weather实例调用changeWeather时，changeWeather中的this就是Weather实例

---类中的方法默认开启局部的严格模式，所以类的内部调用changeWeather方法的时候，this就是undefined。

---onClick点击的时候，changeWeather是作为onClick的回调函数执行的，是直接调用

如果还不明白，下面举个例子：

 speak方法在类的原形对象上，供实例使用，通过Person实例调用speak时，speak中的this就是Person实例，在类中，方法会默认开始局部的严格模式，所以this是undefined。

如果把实例中的方法赋值给一个变量，再来调用，this就是undefined。

解决this的两种方法：

第一种方法：this.changeWeather= this.changeWeather.bind(this)  解决this指向问题

第二种方法：使用箭头函数，要赋值语句+箭头函数，箭头函数没有this，会向上去同级寻找this

三、setState

由于状态不能直接修改，所以我们如果更新数据，就要用到setState，并且是合并操作，而不会替换操作。就是不会影响其他的值正常显示。

结果点击就会切换

 简写方法供参考：同时使用了解决this问题的第二种方法，箭头函数。

四、设置样式

看着我们所完成的 React 项目，是不是还缺少点什么呢，对的，你没有看错，它至今是没有样式的

下面，我们尝试着给它添加一些样式：

在 React 中，我们可以使用 style 行内样式和 class 的方式来完成

 这里需要注意的就是 class 引入的关键字是 className

最后，别忘了下载引入 style-loader 和 css-loader