我们都知道Next.js在做SEO还有网页加载速度优化方面都非常好，我非常喜欢的功能就是代码的预加载，那我的网站为什么不用Next.js来做呢？

问题引入：在React里面，我们`setState`的时候，需要新生成一份state，如果这个state比较大，而且有嵌套，这种操作会变的很繁琐，也很容易出错，比如下面这个：

背景：在升级next.js过程中，遇到需要把已有的.less和.scss文件重命名为.module.scss。而项目比较大，文件比较多，如果手工改，就会非常费时，而且容易出错。所以就想通过脚本来做这些事情。

useCookieState是用来管理Cookie的，可以用hook的方式十分方便的来访问Cookie。

前两天在开发功能的时候，遇到一个需求，需要做一个吸在底部的输入框，当点击某个按钮的时候显示，当点击空白的时候收起。

useClickAway是用来管理点击的，但是这些点击是在目标元素之外，不在之内。啥时候会用到它呢？比如我做了一个弹窗，当点击弹窗外的地方的时候，我想要收起弹窗，这个时候就可以用useClickAway。

之前我只知道可以用分号来分隔命令，这些命令可以一次执行，但是今天在看[hooks](https://github.com/alibaba/hooks)源代码的时候，发现它的`init`命令里面是用`&&`来分隔命令的，那他们之间有什么区别呢？注意我们这里只讨论Linux下的情况，不讨论Windows下的情况，他们不一样。

说来惭愧，在上家公司里面hooks用的不多，现在的新公司新项目，全是函数式组件，没有类组件了。我也开始大量使用各种hooks，然后找到了这个第三方库[hooks](https://github.com/alibaba/hooks)，自定义的hooks。这篇文章就是来分析一下各个hooks的源代码。

项目中有一些公共字典信息，量很多，而且并不会经常变，而且用的地方很多，所以我们就想用自定义的Hooks来获取并缓存数据。这样做有一个很大的好处，当获取到数据之后，调用Hooks的地方可以自动跟着刷新，如果不是Hooks，而只是普通的网络请求和缓存，就做不到这种刷新，需要用回调，观察者或者订阅来做。

CSS的组合器并不是很好学习，我认为最好的学习方法就是通过一些例子，最好是在实际开发中可能会遇到的例子来学习。