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

最新推荐文章于 2024-11-08 11:15:03 发布

2401_84092542

最新推荐文章于 2024-11-08 11:15:03 发布

阅读量359

点赞数 4

分类专栏：程序员文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/2401_84092542/article/details/137462756

版权

程序员专栏收录该内容

282 篇文章 0 订阅

订阅专栏

本文分析了ReactHooks使用中的性能问题，重点讨论了如何通过React.memo、useCallback和useMemo来处理组件重复渲染，以提高性能。作者给出了实际代码示例和优化建议。

摘要由CSDN通过智能技术生成

第一时间关注技术干货！

前言

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属性，都会导致子组件重新渲染

const Child = ((props: any) => {

console.log(“我是前端开发爱好者的子组件，我更新了…”);

return (

子组件

text:{props.name}

{new Date().getTime()}

)

})

const Parent = () => {

const [count, setCount] = useState(0);

const [text, setText] = useState(“”)

const handleClick = () => {

setCount(count + 1);

}

const handleInputChange = (e) => {

setText(e.target.value)

}

return (

count:{count}

)

}

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

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

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

React.memo

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

const Child = React.memo((props: any) => {

console.log(“我是前端开发爱好者的子组件，我更新了…”); // 只有当props属性改变，集name属性改变时，子组件才会重新渲染

return (

子组件

text:{props.name}

{new Date().getTime()}

)

})

const Parent = () => {

const [count, setCount] = useState(0);

const [text, setText] = useState(“”)

const handleClick = () => {

setCount(count + 1);

}

const handleInputChange = (e) => {

setText(e.target.value)

}

return (

count:{count}

)

}

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

useCallback

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

使用useCallback可以缓存函数。需要搭配memo使用

const Child = React.memo((props: any) => {

console.log(“我是前端开发爱好者的子组件，我更新了…”);

return (

子组件

text:{props.name}

{new Date().getTime()}

)

})

const Parent = () => {

const [count, setCount] = useState(0);

const [text, setText] = useState(“”)

const handleClick = () => {

setCount(count + 1);

}

const handleInputChange = useCallback((e) => {

setText(e.target.value )

},[])

return (

count:{count}

)

}

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])

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

资料领取方式：戳这里获取

g2.imgtp.com/2024/03/13/H4lCoPEF.jpg" />