React 基础小知识：state

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

二倍速刷 B 站 # 尚硅谷2021版React技术全家桶视频，记录一下有趣的一些点吧。（习惯看文章和看文档，现刷视频感觉有点不适应，单口相声老师讲的很好，讲的太细但也不错。）

state 概念

state：状态，是一个 JavaScript 对象。

state 在组件中创建，一般在 constructor 中初始化。
通过 setState() 更新组件的 state 来重新渲染组件即更新页面显示。
出于性能考虑，React 可能会把多个 setState() 调用合并成一个调用。

class Weather extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isHot: true };
    this.changeWeather = this.changeWeather.bind(this);
  }
  render() {
    const { isHot } = this.state;
    return (
      <h1 onClick={this.changeWeather}>
        今天天气很{isHot ? "炎热" : "凉爽"}
      </h1>
    );
  }
  changeWeather() {
    const isHot =  this.state.isHot
    this.setState({isHot: !isHot})
  }
}
ReactDOM.render(<Weather />, document.getElementById("test"));
复制代码

`this.setState()` 是从哪里来的？

如下图可以知道 Weather 组件中的 this.setState() 是继承自 React.Component，即 setState() 挂载在 React.Component 原型上，是 React 帮我们封装好的。

`this.setState()` 修改值是合并还是替换？

将上述代码 constructor 中 this.state = { isHot: true }; 改成 this.state = { isHot: true, wind: '微风' };

可以发现每次 this.setState({isHot: !isHot}) 修改 state 是一个合并而不是一个替换。因为它只修改了 isHot 而不影响 wind 原来的值。

`constructor`、`render`、 `事件回调` 调用了几次？

可以在这几个方法里面增加控制台打印

constructor：构造器 1 次。
render：渲染 1 + n 次，1 是初始化那次，n 是状态更新的次数。
事件回调：事件触发几次调用几次，类里面的方法（自定义的）大部分基本都是作为事件回调使用。

代码简写之后的一些小细节

class Weather extends React.Component {
  // 实例属性（无法传参）
  state = { isHot: true };
  
  render() {
    const { isHot } = this.state;
    return (
      <h1 onClick={this.changeWeather}>
        今天天气很{isHot ? "炎热" : "凉爽"}
      </h1>
    );
  }
  
  // 自定义方法（本质上是方法类型的实例属性）：要用赋值语句和箭头函数
  changeWeather = () => {
    const isHot =  this.state.isHot;
    this.setState({isHot: !isHot});
  }
}
ReactDOM.render(<Weather />, document.getElementById("test"));
复制代码

（上面简化后的代码已经删除了 construtor）通常在 React 中，构造函数仅用于以下两种情况：

通过给 this.state 赋值对象来初始化内部 state。
为事件处理函数绑定实例。

由这篇文章 React 基础小知识：类中可以得知实例属性有两种写法：一种是带参数使用 this 定义在 constructor 里面，一种是不带参数直接在类里定义并初始化（简化）。

由这篇文章 React 基础小知识：this中可以知道事件回调函数会隐性丢失 this，所以我们需要在构造器里面手动进行硬绑定。但是，使用赋值语句和箭头函数搭配，可以保证事件回调方法挂载到该实例上。

截屏2021-09-30 下午4.20.52.png

`setState(updater, [callback])` 批量推迟更新

setState() 并不总是立即更新组件，它会批量推迟更新。这使得在调用 setState() 后立即读取 this.state 成为了隐患。

下面两种方式都可以保证应用更新后触发然后获取到最新的值：

componentDidUpdate(prevProps, prevState, snapshot)
setState 的回调函数：setState(updater, callback)