React Hooks 性能优化，带你玩转 Hooks

r囧r小猫 2022-10-11 03:45 251阅读 0赞

点击下方“前端开发爱好者”，选择“设为星标”

第一时间关注技术干货！

前言

React Hooks 出来很长一段时间了，相信有不少朋友已经深度使用了。无论是react本身还是其生态中,都在摸索着进步。鉴于我使用react的经验，给大家分享一下 React Hooks性能优化可以从哪几个方面入手。至于React Hooks 的使用方式，本文就不做过多的讲解了，可以自行查看https://react.docschina.org/docs/hooks-intro.html

**问题关键**

**    **要想解决性能问题，关键在于组件重复渲染的处理。在使用 React Hooks 后，很多人会抱怨渲染次数变多，比如我们会把不同的数据分成多个 state 变量，每个值的变化都会触发一次渲染。

举个例子： 现在有个父子组件，子组件依赖父组件传入的name属性，但是父组件name属性和text属性变化都会导致Parent函数重新执行，所以即使传入子组件props没有任何变化，甚至子组件没有依赖于任何props属性，都会导致子组件重新渲染

上面的代码执行你会发现，不管是触发 handleInputChange 还是触发 handleClick ，子组件都会在控制台输出   我是前端开发爱好者的子组件，我更新了...   所以即使传入子组件props没有任何变化，甚至子组件没有依赖于任何props属性，子组件都会重新渲染。

想要解决重复渲染的问题，可以使用 react的亲手制造升级的儿子，他有三个方法用来做优化，分别是  React.memo       useCallback       useMemo 。

*  React.memo : 和 class 组件时期的 PureComponent 一样，做简单额数据类型比较
 *  useMemo : 可以用来比较复杂类型的数据，不如 Object Array 等
 *  useCallback : 升级版本，用于控制传递函数时候控制组件是否需要更新

**React.memo **

使用memo包裹子组件时，只有props发生改变子组件才会重新渲染。使用memo可以提升一定的性能。

但如果传入的props包含函数，父组件每次重新渲染都是创建新的函数，所以传递函数子组件还是会重新渲染，即使函数的内容还是一样。如何解决这一问题，我们希望把函数也缓存起来，于是引入useCallback

**useCallback**

useCallback用用于缓存函数，只有当依赖项改变时，函数才会重新执行返回新的函数，对于父组件中的函数作为props传递给子组件时，只要父组件数据改变，函数重新执行，作为props的函数也会产生新的实例，导致子组件的刷新  
使用useCallback可以缓存函数。需要搭配memo使用

useCallback第二个参数依赖项什么情况下使用呢，看下面的例子

//修改handleInputChange
    const handleInputChange =useCallback((e) => {
            setText(e.target.value + count)
        },[])

以上例子count改变会发生什么事呢？  
count改变，但handleInputChange不依赖与任何项，所以handleInputChange只在初始化的时候调用一次函数就被缓存起来，当文本改变时或者count改变时函数内部的count始终为0，至于为什么需要看useCallback源码后解答。  
所以需要将count加入到依赖项，count变化后重新生成新的函数，改变函数内部的count值

const handleInputChange =useCallback((e) => {
            setText(e.target.value + count)
        },[count])

### **useMemo** ###

**   ** useMemo使用场景请看下面这个例子,getTotal假设是个很昂贵的操作，但该函数结果仅依赖于count和price，但是由于color变化，DOM重新渲染也会导致该函数的执行，useMemo便是用于缓存该函数的执行结果，仅当依赖项改变后才会重新计算

修改后如下，注意useMemo缓存的是函数执行的结果

至此重复渲染的问题的解决基本上可以告一段落。

在 React 中是极力推荐函数式编程，可以让数据不可变性作为我们优化的手段。我在 React class 时代大量使用了 immutable.js 结合 redux 来搭建业务，与 React 中 PureComponnet 完美配合，性能保持非常好。但是在 React hooks 中再结合 typescript 它就显得有点格格不入了，类型支持得不是很完美。这里可以尝试一下 immer.js，引入成本小，写法也简洁了不少。

最后推荐一个比较好用的 hooks 库 ：ahooks : https://ahooks.js.org/zh-CN/hooks/async

ahooks 是一个 React Hooks 库，致力提供常用且高质量的 Hooks。针对性能优化也提供了相应的hooks, 例如 ： `usePersistFn`  `useCreation` ...

更多 hooks 的使用自行查看官方文档吧，这里就不做过多的介绍了。

往期推荐

[React Hooks使用心得！真香][React Hooks]

[前端开发者应该知道的 Centos/Docker/Nginx/Node/Jenkins 操作][Centos_Docker_Nginx_Node_Jenkins]

[百度统计分析埋点最佳实战篇][Link 1]

[Mapbox 3D 卫星地图带你领略环法自行车骑行，那飞一般的感觉！][Mapbox 3D]

[Vue3 全家桶 + TS+ Vite2 + element-plus 搭建简洁时尚的博客网站实战及踩坑记][Vue3 _ _ TS_ Vite2 _ element-plus]

[React Hooks]: http://mp.weixin.qq.com/s?__biz=MzUzNTk3MjE2Ng%3D%3D&chksm=fafc12fdcd8b9beb03125f7834d5968dc1dee00d4085a7679a2612740f8dbaf9f4a5d4c28936&idx=1&mid=2247484116&scene=21&sn=05300719ff7a07f268153ebe71c01a28#wechat_redirect
[Centos_Docker_Nginx_Node_Jenkins]: http://mp.weixin.qq.com/s?__biz=MzUzNTk3MjE2Ng%3D%3D&chksm=fafc134dcd8b9a5b9fda950b32b37e585748a595961d68eb8bb69fad702799561587cd85ae69&idx=1&mid=2247484260&scene=21&sn=cdc6c785a4a4bd9733a207a6b9a7c2d5#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzUzNTk3MjE2Ng%3D%3D&chksm=fafc1321cd8b9a373b388dc57b1453988d440c23da87057f84f637fe51095ddfac58318026bc&idx=1&mid=2247484168&scene=21&sn=f1884ea68208410cc3b8c440230a8ef5#wechat_redirect
[Mapbox 3D]: http://mp.weixin.qq.com/s?__biz=MzUzNTk3MjE2Ng%3D%3D&chksm=fafc1341cd8b9a57c816c32b18cfdd04f3409ddef4828bf6fd041a3846b0c2c2774802745e03&idx=1&mid=2247484264&scene=21&sn=c09967fd108c7a08705e042c2d76741c#wechat_redirect
[Vue3 _ _ TS_ Vite2 _ element-plus]: http://mp.weixin.qq.com/s?__biz=MzUzNTk3MjE2Ng%3D%3D&chksm=fafc1347cd8b9a513817278c0c34e4b56adbdd9b9dbf9891148489e2a924061d0981806167ea&idx=1&mid=2247484270&scene=21&sn=3fd2792bc231ef8aac11e3883eb2ebe8#wechat_redirect