Javascript 这个闭包如何使componentDidUpdate表现得像useEffect？

我在读丹·阿布拉莫夫的文章：，在这一部分：每个渲染都有自己的…每件事，有两个例子，第一个 像这样使用

useffect

：

const UseEffectCounter = () => {
    const [count, setCount] = useState(0);
    useEffect(() => {
        setTimeout(() => {
            console.log(`You clicked ${count} times`);
        }, 3000);
    });
    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>+1</button>
        </div>
    )
}

class ComponentDidUpdateCounter extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        }
    }
    componentDidUpdate() {
        setTimeout(() => {
            console.log(`You clicked ${this.state.count} times`);
        }, 3000);
    }

    render() {
        return (
            <div>
                <p>You clicked {this.state.count} times</p>
                <button onClick={() => this.setState({count: this.state.count + 1})}>+1</button>
            </div>
        )
    }
}

如果单击n次并等待超时完成，控制台将记录您单击n次的次数，而不是按顺序单击的次数。这很好，因为React会变异

This.state.count

以始终指向状态的最新值

但是，像这样简单地修改

组件didUpdate

将使组件的行为与第一个示例类似：

componentDidUpdate() {
    const count = this.state.count
    setTimeout(() => {
        console.log(`You clicked ${count} times`);
    }, 3000);
}

---

此闭包如何使组件的行为类似于

useffect

？

产生差异的原因是

this.state.count

在示例中的不同点进行了计算

this.state.count

在第三个示例中，在每次更新后将其分配给

count

时进行计算，而在第二个示例中，

this.state.count

在超时的结束时进行计算。在超时结束时，所有更新很可能都已经发生，因此您可以看到记录的值相同。但是将其分配给本地

count

变量只会延迟日志记录，而不会延迟评估

---

在

useffect

版本中，每个渲染都会创建一个新的计数常量，并且一个常量只能指定一次。这就是它按顺序记录每个值的原因，因为即使等待状态更新完成，常量也永远无法更新。

@brianthonpson您能提供一个答案让我接受吗？