React 函式元件与Class元件之不同

前言

本文引申与Dan Abramov的博文, How Are Function Components Different from Classes?, 感兴趣的同学可以直接看原文。 本文在Dan的文章的基础，做了一些自己的思考。

两个元件有何不同

当点选button，延迟3s后，两个元件都会在控制台打印props.user属性。咋一看没啥区别，但是如果在延迟的3s的之间，我们修改了props.user属性。class元件会打印最新的值，而function元件打印的还是旧值。

Dan给出了一个线上的Demo

这是因为，在React中props是不可变的。但是this不是，this是一直是可变。

如何在class元件中，打印出旧值？

我们可以元件render时，利用javascript的闭包特性，捕获props。我们知道，在javascript中函式执行完成后，函式内部建立的变数，会被javascript的垃圾回收机制所回收。

但是如果在回拨函式中，我们依赖了这个变数，这个变数就不会被回收。我们在render函式执行的时候，建立了props常量。并在定时器的callback中引用了它。它在定时器的callback执行完成前，会一直存在在内存中。所以我们在执行callback时，打印的依然是旧的值。

⚛️从源代码的角度进行分析

限于本人能力有限，react的源代码对于我来说实在有些困难。我们将从preact源代码，一窥究竟。

在preact中，会将元件例项的props属性作为引数，传入元件的render函式中。

当例项的props属性发生修改时，class元件直接使用this（元件的例项），所以可以直接获取元件最新的props。而在函式元件中，之前的props引数，已经因为javascript闭包的特性，储存在内存之中，无法从外部进行修改。所以在定时器执行callback时，打印的还是旧值。

如果你在理解上还有些困难，可以尝试理解，以下简化的程式码。说明了，为什么函式元件会打印旧值。

⚓️如何在funtion元件中，打印出新值？

我们可以尝试利用useRef。当然这种使用useRef的方式，不是普遍的