您现在的位置是：首页 > WEB开发 > 正文

WEB开发

React避免组件重复渲染

1987web2024-03-26WEB开发46

前言在React开发中如果不去管组件的重复渲染问题，项目稍微复杂一点性能将不堪入目，下面将介绍项目中最常见的例子及解决方案（仅hooks组件）。

前言

在 React 开发中如果不去管组件的重复渲染问题，项目稍微复杂一点性能将不堪入目，下面将介绍项目中最常见的例子及解决方案（仅 hooks 组件）。

预先了解所用知识

React.memoReact.useCallbackReact.useMemouseMemoizedFn（利用 ref + useMemo 配合单例模式实现比 useCallback 更加好用的 hook，下面会提，强烈推荐）

没错，只需使用上面4点即可解决大多数组件重复渲染问题，而如何合理去使用呢？

例1: 父组件状态更新导致子组件无效渲染

constParent=()=>{const[count,setCount]=useState(0);const[son1Count,setSon1Count]=useState(0);const[son2Count,setSon2Count]=useState(0);return(<div>{console.log("Parent render")}<button onClick={()=>setCount(v=>v+1)}>Parent+1

WEB开发

React避免组件重复渲染

前言

预先了解所用知识

例1: 父组件状态更新导致子组件无效渲染

Python学习笔记（十一）-- Django API RESTful

python打包技巧：彻底解决pyinstaller打包exe文件太大的问题

相关文章