内容简介：本文引申与Dan Abramov的博文,本文在Dan的文章的基础，做了一些自己的思考。
: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 的方式，不是普遍的
✍️参考
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
免费:商业的未来
Chris Anderson / 中信出版集团 / 2015-10-1 / 35.40
《免费》，这是一个商业模式不断被颠覆、被改写的时代。一种商业模式既可以统摄未来市场，也可以挤垮当前市场——在我们这个现代经济社会里，这并不是一件不可能的事情。“免费”就是这样的一种商业模式，它代表了互联网时代的商业未来。 “免费”商业模式是一种建立在以电脑字节为基础上的经济学，而非过去建立在物理原子基础上的经济学。在原子经济中，随着时间的推移，我们周围的物品都在逐渐升值。但是在字节经济的网络......一起来看看 《免费:商业的未来》 这本书的介绍吧!
