React中class组件和function组件的区别

随着hooks的流行,class组件基本已经销声匿迹,甚至于面试时候问及class组件和function组件的区别的次数都逐渐降低,但是深入的了解两者的区别,还是很有必要的.

为什么React要从class组件转向function组件

1. 在组件之间复用状态逻辑很难,而hooks能够实现粒度更细的状态复用,理解的更简单一点,其实就是可以将state抽离出来,所以才能实现状态逻辑的复用.

2. 复杂组件变得难以理解,其实也是状态逻辑、粒度的问题.

3. 难以理解的class,这点其实还好,而且随着class的各种提案的兴起,class在某些场景下还是有很大的优势.

class组件和function组件的区别

1. class和function的区别. class和function本身就存在着显著区别.class本身可以抽象、继承,所以我们在使用class组件时,可以直接继承PureComponent,实现shouldComponentUpdate，对props进行浅层比较,优化渲染.class有静态属性,function组件中使用防抖、节流要用到useRef等手段,class中并不需要.class可以使用装饰器.等等.

2. 在React运行时二者的区别.class组件需要实例化,调用render属性获取子节点.function组件在每次更新中都会重新执行一遍,才能够获取到return出来的子节点.所以function组件中如果要使用state,或者要实现类似class组件中的静态属性等功能,就必须使用useState、useRef,将状态、属性等保存到function之外,也就是fiber、element上去.

我们可以简单的通过一个搜索功能的实现,来观察二者的区别.我们需要实现的功能,类似于百度等搜索引擎的输入框,在输入停止3秒后,根据输入内容,获取相关提示内容

先写一个简单的debounce函数

在class组件中使用它,input是一个受控组件,onChange之后,改变state,页面得到更新,输入框值得到改变,3秒后展示了关键字,运行正常

我们使用function组件来实现这个功能

我们会发现debounce并没有起作用,因为每一次的setValue都会触发更新,然后function组件整个执行一遍,都是一个snapshot,每一次的触发的onChange函数都是重新创建的,onChange中调用的search函数,也是重新创建的,每一次函数的执行都是一次快照,就像我们拍照一样,就算两次拍照姿势一模一样,但是上一次的你和下一次的你已经不是同一个你了.因此debounce功能肯定会失效.这个时候就需要我们使用useRef、useCallback、useMemo等方法将不需要每次都更新的函数保存起来,确保我们每次调用的都是同一个函数,这也是function组件常用的优化方法,但是同样会带来一些心智负担.

useCallback的第二参数类似于useEffect的第二个参数,只有在依赖项改变时才会更新,确保我们search每次指向的均是同一个函数,所以我们的debounce运行变正常.

hooks确实解决了它React想要解决的问题,但是没有银弹,class也并非一无是处,某些领域,class似乎更具想象力.