「React」函数组件于Class组件有何不同？

:book:前言

本文引申与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是一直是可变。

:bulb:如何在class组件中，打印出旧值？

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

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

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

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

在preact中，会将组件实例的props属性作为参数，传入组件的render函数中。

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

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

:anchor:️如何在funtion组件中，打印出新值？

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

✍️参考

• How Are Function Components Different from Classes?
• preact