React函数式组件的性能优化思路详解
优化思路
主要优化的方向有2个：
- 减少重新 render 的次数。因为在 React 里最重(花时间最长)的一块就是 reconction(简单的可以理解为 diff)，如果不 render，就不会 reconction。
- 减少计算的量。主要是减少重复计算，对于函数式组件来说，每次 render 都会重新从头开始执行函数调用。
在使用类组件的时候，使用的 React 优化 API 主要是：shouldComponentUpdate和 PureComponent
那么在函数式组件中，我们怎么做性能优化？主要用到下面几个方法去优化
- React.memo
- useCallback
- useMemo
React.memo
看个例子：
我们在父组件中放一个按钮用于修改子标题，并引入Child子组件
可以看到，第一次进来子组件打印了console.log('我是子组件')
当点击修改子标题，Child子组件也打印了，造成了不必要的重复渲染次数
//父组件
import {useState} from 'react'
import Child from "./Child";
const Index = ()=>{
const [subTitle, setSubTitle] = useState('我是子标题')
const updateSubTitle = ()=>{
setSubTitle('修改子标题')
}
return (
<div>
<div>函数式组件性能优化</div>
<div>{subTitle}</div>
<button onClick={updateSubTitle}>修改子标题</button>
<Child/>
</div>
);
}
export default Index;
//子组件Child.js
const Child = ()=>{
console.log('我是子组件')
return (
<div>我是子组件</div>
)
}
export default Child
优化一下，使用React.memo包裹子组件
import React from "react";
const Child = ()=>{
console.log('我是子组件')
return (
<div>我是子组件</div>
)
}
export default React.memo(Child)
再观察一下，发现Child子组件没有重复渲染了
useCallback
这里我们再改造一下，给Child子组件添加一个onclick事件，然后点击修改子标题按钮，发现我们的Child子组件又重新渲染了，这里主要是因为修改子标题的时候handlerClick函数重新渲染变化，造成子组件重新渲染
// 父组件
const Index = ()=>{
const [subTitle, setSubTitle] = useState('我是子标题')
const updateSubTitle = ()=>{
setSubTitle('修改子标题')
}
const handlerClick = ()=>{
console.log('子组件点击')
}
return (
<div>
<div>函数式组件性能优化</div>
<div>{subTitle}</div>
<button onClick={updateSubTitle}>修改子标题</button>
<Child onClick={handlerClick}/>
</div>
);
}
// Child子组件
const Child = (props)=>{
console.log('我是子组件')
return (
<div>
<div>我是子组件</div>
<button onClick={props.onClick}>子组件按钮</button>
</div>
)
}
export default React.memo(Child)
优化一下，使用useCallback包裹处理子组件的handlerClick函数，再次点击updateSubTitle修改子标题，发现Child子组件没有重新再渲染
// 父组件
const Index = ()=>{
const [subTitle, setSubTitle] = useState('我是子标题')
const updateSubTitle = ()=>{
setSubTitle('修改子标题')
}
const handlerClick = useCallback(()=>{
console.log('子组件点击')
},[])
return (
<div>
<div>函数式组件性能优化</div>
<div>{subTitle}</div>
<button onClick={updateSubTitle}>修改子标题</button>
<Child onClick={handlerClick}/>
</div>
);
}
export default Index;
这里关于useCallback的用法
const callback = () => {
doSomething(a, b);
}
const memoizedCallback = useCallback(callback, [a, b])
把函数以及依赖项作为参数传入 useCallback，它将返回该回调函数的 memoized 版本，这个 memoizedCallback 只有在依赖项有变化的时候才会更新。
useMemo
useMemo用于计算结果缓存
我们先看个例子，在之前基础上添加一个calcCount计算函数，然后点击updateSubTitle更新子标题，发现calcCount重新计算了，也就是每次渲染都会造成重复计算，如果是计算量比较大的情况下，会极大的影响性能
// 父组件
const Index = ()=>{
const [subTitle, setSubTitle] = useState('我是子标题')
const updateSubTitle = ()=>{
setSubTitle('修改子标题')
}
const handlerClick = useCallback(()=>{
console.log('子组件点击')
},[])
const calcCount = ()=>{
let totalCount = 0
for(let i=0;i<10000;i++){
totalCount+=i
}
console.log('totalCount',totalCount)
return totalCount
}
const count = calcCount()
return (
<div>
<div>函数式组件性能优化</div>
<div>{subTitle}</div>
<button onClick={updateSubTitle}>修改子标题</button>
<div>count:{count}</div>
<Child onClick={handlerClick}/>
</div>
);
}
优化一下，使用useMemo缓存计算结果,我们再次点击updateSubTitle修改子标题按钮，可以发现calcCount函数不再重复计算
const calcCount = ()=>{
let totalCount = 0
for(let i=0;i<10000;i++){
totalCount+=i
}
console.log('totalCount',totalCount)
return totalCount
}
const count = useMemo(calcCount,[])
最后，需要注意的是不能盲目的使用useMemo，要根据具体的场景，比如对于一个数据计算量比较大，那么使用是比较适用的，而对于普通的一些值得计算，可以不使用，因为本身useMemo也是会消耗一些性能，盲目使用反而会适得其反
参考阅读
https://mp.weixin.qq.com/s/YGvmSrr-yhPUNHbwlLSFsA
http://www.ptbird.cn/react-hook-useMemo-purerender.html
到此这篇关于React函数式组件的性能优化的文章就介绍到这了,更多相关React性能优化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了React使用ref方法与场景，React支持给任意组件添加特殊属性。ref属性接受一个回调函数，它在组件被加载或卸载时会立即执行2022-10-10
react setupProxy.js导致项目无法启动的解决
这篇文章主要介绍了react setupProxy.js导致项目无法启动的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
解决React报错Parameter 'props' implicitly&nb
这篇文章主要为大家介绍了React报错Parameter 'props' implicitly has an 'any' type的解决处理方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
React中使用echarts-for-react的方法示例
echarts-for-react则是ECharts在React生态中的官方封装组件,它让开发者能够轻松地在React应用中集成ECharts图表,本文就来介绍一下echarts-for-react的使用,感兴趣的可以了解一下2025-03-03
这篇文章主要介绍了如何在 React Native 中添加自定义字体,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
本篇文章主要介绍了React Native实现进度条弹框的示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
React 和 Vue 都是当今最流行的前端框架,它们都实现了组件化开发模式,本文将从React和Vue的组件更新原理入手,剖析两者虚拟DOM difer算法的异同点,具有一定的参考价值,感兴趣的可以了解一下2024-02-02
这篇文章主要介绍了react中useRef的应用使用详解的相关资料,需要的朋友可以参考下2023-05-05
在Ant Design Pro登录功能中集成图形验证码组件的方法步骤
这篇文章主要介绍了在Ant Design Pro登录功能中集成图形验证码组件的方法步骤，这里的登录功能其实就是一个表单提交，实现起来也很简单，具体实例代码跟随小编一起看看吧2021-05-05
这篇文章主要为大家介绍了React实时预览react-live源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
最新评论