5.21-5.31 每日一学

5.21

hooks与类组件

类组件

众所周知，react在早期的时候全都是类组件，那时候hooks还没出来，函数组件的作用显得很渺小，无状态，仅仅为了渲染。而类组件我们熟知的就是继承自react.component，使其拥有许多强大的功能，比如生命周期，定义state。今早看了一篇觉得不错的文章，它说类组件相当于一个战艇，它功能强大，能做任何事情，但是有优势也有劣势，
如果只是想让它完成一些小功能，类组件显得有点杀鸡焉用牛刀的感觉。
其次，类组件复杂的this指向也是初学者所困惑的点，
再者，功能的复杂会使得类组件的比如componentDidmoutn函数里面拥有大量不相关的逻辑，比如发送网络请求啊，绑定dom操作啊，获取props时等等，逻辑混在了一起
而且 我们之前用类组件编写的时候，业务功能，是与生命周期绑定在一起的。
并且，类组件的复用往往很难，经常需要使用高阶函数这些方法来进行复用等等，学习成本骤然提升。这点我在初学react的时候深有体会。

函数组件

Hooks的出现使得函数组件火了起来，其方便的hooks比如useEffect,useState等，使得函数组件活了过来，并且更加轻便，我们可以将相同逻辑的代码写在同一个hooks里面，逻辑清晰。函数组件就相当于一量轻艇，使用过的同学应该深有体会，代码简洁等等，hooks的出现相当于是将类组件的所有功能放在一个箱子，函数组件可以选择性的拿自己所需要的工具，这使得函数组件的学习成本没有那么高。再者，函数组件没有死亡的this指向问题，比如使用类组件的时候，虽然porps不能改变，但this是可以改变的，我们要是定义一个setTIMEOUT,使其三秒后获取this，这时候this指向可能会被修改，而出现一些意想不到的错误，但是hooks不会，他的porps是从一而终，并且没有this问题，即使使用setTimeout，当父组件传递的数值变化后，只会引起函数组件的重新渲染，从而保证，数据与渲染是紧紧结合的。
react的设计思想 ui = f(data)
顾名思义，给你data，返回我ui，hooks实则更加贴近这个理念，因为类组件做不到数据与渲染紧紧结合在一起，就拿那个三秒后获取this的问题，因为三秒后的this不同，可能获取到的数据也不同，而函数组件因为没有this，整个props都是固定的，他只会因为父组件的修改而引起函数组件重新渲染而修改。所以hooks函数式编程其实更贴近react的初心。

为什么使用函数组件

告别难以理解的 Class；
解决业务逻辑难以拆分的问题；
使状态逻辑复用变得简单可行；
函数组件从设计思想上来看，更加契合 React 的理念。
难以理解的class，大量的生命周期，this指向，组件复用高阶函数等的概念，使得学习成本大大提高，业务逻辑与生周绑定在一起等等。
类之间react原始并没有提供复用状态逻辑的的方式，靠的是高阶组件这种设计模式，但这种设计模式也会造成破坏组件结构，还可能造成嵌套地狱。而hooks则是react原生提供的复用组件状态的途径。

hooks绝非万能

hooks看似很好但是也不是万能的，不能很好的处理像getSnapshotBeforeUpdate、componentDidCatch 这种生命周期,并且其实在处理很复杂的逻辑的时候，你会在过于拆分或者过于复杂之间徘徊（之前写的比较复杂的组件就有遇到这问题）等等，再者hooks有着严格约束，每个hooks的作用功能鲜明，如果处理不好很容易出错。比如useCallback,useMemo的依赖问题等等

所看文章： https://mp.weixin.qq.com/s/PDrCZKTRXhWf4qFFR69GwQ

5.22