react.js - React 类组件中setState更新状态时，解构与非解构的区别是什么？

Question

类组件中setState更新状态不同写法定时器结果不同
使用解构

    componentDidMount() {
        const { n } = this.state
        this.timer = setInterval(() => {
            this.setState({ n: n + 1 })
        }, 1000);
    }

不使用解构

    componentDidMount() {
        this.timer = setInterval(() => {
            this.setState({ n: this.state.n + 1 })
        }, 1000);
    }

为什么两种答案不一样呢，第一个只触发一次，第二个定时器有效，按理来说setState是异步的都不能出发定时器啊，有大佬帮忙解释一下吗

Answer 1

不是解构不解构导致的差异，这是你两个取值时机不一样导致的差异。
第一种应该这样写：

this.timer = setInterval(() => {
    const { n } = this.state
    this.setState({ n: n + 1 })
}, 1000);

Answer 2

这个问题跟解构、异步都没有关系。相关的知识点是闭包，读取state的时机。
第一段代码只读取一次state.n, 每次interval执行n+1都是同一个值。
第二段代码在每次interval执行的时候读取state.n，在最新值的基础上+1