在学习时，先接触的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(…)内部直接使用 |
