类组件运行两次,而函数只运行一次的原因是因为类组件和函数组件在运行机制上存在一些差异。
首先,类组件是通过类的实例化来创建的,而函数组件是直接执行函数体来创建的。当类组件被实例化时,会经历以下几个阶段:
render
方法生成虚拟DOM。render
方法生成新的虚拟DOM。在挂载阶段和更新阶段,类组件会执行render
方法生成虚拟DOM,并将其渲染到页面上。因此,类组件的render
方法会运行两次。
相比之下,函数组件没有实例化的过程,它只是执行函数体并返回一个React元素。函数组件在每次渲染时都会执行函数体,但不会像类组件那样经历挂载和更新阶段。因此,函数组件只会运行一次。
总结起来,类组件运行两次是因为它们经历了实例化、挂载和更新阶段,而函数组件只运行一次是因为它们没有实例化的过程,只是执行函数体并返回结果。
领取专属 10元无门槛券
手把手带您无忧上云