React

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

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

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

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

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

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

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

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

即便我们不去做性能优化，`React`内部已经帮我们做了很多性能上的优化，而`React.memo`可以更进一步优化组件的渲染次数。在这篇文章中我将会跟你解释一下如何通过使用`React.memo`来优化React性能，一些使用时候的常见错误，以及为什么你并不总是需要用`React.memo`

本文翻译自：[Why React Hooks?](https://dev.to/tylermcginnis/why-react-hooks-51lj)任何你要学习新知识的时候，你都得问一下你自己两个问题：