在学习时,先接触的class组件之后才是带有hooks的函数式组件。可能是自己大脑更偏向于有了这种方式解决干嘛又要学另外的,自己也比较清楚this的指向问题,所以就更偏向于使用class组件。可是,视频课以及各种文章都在推崇hooks,打算静下心来了解一下两者区别(目前未进行过react项目开发,仅仅代表当前阶段的认知,轻喷~)
React的class组件和有hooks后的函数式组件都可以进行内部状态保存及生命周期的执行。
类组件 | 函数式组件 | |
---|---|---|
性能 | class编译es5后会多出一堆辅助函数(继承React.Component) | 只有一个createElement |
可读性 | (1)connect、mapXXXToProps、subscribe、dispatch还有各种生命周期钩子;(2)通过箭头函数绑定this | (1)清一色的useXXX:useState,useReducer,useEffect,setState;(2)内部不存在this,通过隐士调用即可 |
封装性 | (1)state和生命周期函数最终都要统一放到一起;想要将业务代码抽离到组件外部,只能通过回调函数调用setState对状态进行修改或者将状态交由redux管理;(2)使用多个context需要consume层层嵌套 | 可自定义hook(1)可以将state、生命周期钩子根据业务进行分离;(2)const context = useContext(…)内部直接使用 |