文章目录

• • 1 state简介
  • 2 初始化state
  • 3 React中事件绑定
  • 4 类方法中this指向问题
  • 5 解决React类组件方法this指向
  • 5 setState
  • • 5.1 更新state状态数据方式
    • 5.2 更新state整体替换还是合并相同项？
    • 5.3 关于构造器、render方法调用次数
  • 6 state简写
  • 7 问题解答
  • 后记

1 state简介

React中没有state(状态)的组件称为简单组件；有state称为复杂组件。

• 理解
  • state是组件对象最重要的属性之一，值是对象（1个或者多个key-value组合）
  • 组件被称为状态机，通过更新组件的state来更新对应页面显示（重新渲染组件）

下面我们来一步一步认识state，并最后给出日常开发中使用state的形式。

2 初始化state

下面展示一个小案例，通过点击文本，来切换今天的天气，如下图2-1所示：

第一步先把文本通过React组件显示在页面上，代码2-1如下：

state初始化及访问步骤：

1. 在构造函数中this.state=值（对象）
2. 在render方法中{}内this.state.key访问key对应的值

注：

1. state是Weather实例中的属性，要想初始化需要借助构造器。
2. render中的this就是当前组件的实例对象

问题：

1. Weather实例不是由我们new，而是React创建的，React在创建时，构造函数传递了那些参数呢？
2. 构造器中的super能不能省略呢？

借助开发者工具查看下组件实例，如下图2-1所示：

3 React中事件绑定

在上面呢，我们完成了state的初始化和读取，实现了文本的展示，那么如果通过鼠标点击来完成切换呢？

参考js很容易想到，要通过绑定鼠标点击事件来完成。那么在Reac中如何绑定事件呢?

第一步在类中定义鼠标点击处理函数：

    changeWeather() {console.log(this);this.state.isHot = !this.state.isHot}

第二步在render函数返回标签上绑定点击事件：

    render() {// 读取状态console.log(this);return 
今天天气很{this.state.isHot ? '炎热' : '凉爽'}
}

注：

1. onClick遵循小驼峰命名规则
2. this.changeWeather后不加()

鼠标点击查看console输出：

undefined
Inline Babel script:25 Uncaught TypeError: Cannot read properties of undefined (reading 'state')

为啥呢？下面讲解

4 类方法中this指向问题

示例代码如下：

输出：

Person
undefined
Window
undefined

5 解决React类组件方法this指向

解答下上面为什么点击，调用changeWeather()，输出是undefied问题？

onClick={this.changeWeather}，这里为鼠标点击之前，通过this实例原型链找到changeWeather方法，交给onClick用于回调。当点击的时候属于直接调用changeWeather()方法，而不是通过Weather的实例对象。

又因为类中普通方法默认开启严格模式，且经过babel翻译，所以是undefined不是windows也不是Weather实例

解决方案一：既然此处是非实例调用，导致this执行改变，那么我们通过bind方法改变this指向为Weather实例并重新放置在Weather实例上。

代码调整如下：