函数式组件和类组件的差异有很多,例如函数式组件没有生命周期而类组件有生命周期一类的想必大家都很清楚。
这里讨论的是在函数是组件里使用HOOK让函数是组件拥有了类组件的一些特性之后,这些特性在函数式组件与类组件里的差别在哪里。
首先,我们要铭记两点(重点):
1、函数式组件只是返回一个 React Element。我们渲染一个函数式组件时,只是执行了一次函数,得到了一个React Element,并没有产生实例。
2、类组件是一个类实例,通过new得来的,只不过我们看不见new的过程而已。当我们渲染类组件时,其实是调用这个类实例的render函数,进而得到一个React Element。
这就引出了函数式组件与类组件的最大区别:
1、函数式组件的props和state等都是独立存在的,重新渲染函数式组件时只是重新执行了一次函数;
2、类组件由于是一个类实例,这就导致了它的props和state等都是挂载到这个实例上的,每次导致类实例重新渲染的props和state其实是同一个。
由于以上原因,当我们在函数式组件中使用其它的HOOK钩子时,例如useEffect、useRef等,不能因为相似就从类组件的角度出发去看待这些函数式组件的特性。