当前位置: 首页 > news >正文

react性能优化

memo

如下所示例子中,因为App内部状态的更新,总会牵连其无辜子组件Demo的更新。

const Demo = () => {console.log('Demo render');return (<div>我是子组件</div>);
};const App = () => {console.log('App render');const [count, setCount] = useState(0);const doInc = () => {setCount(count + 1);};return (<><div>{count}</div><button onClick={doInc} className='bg-blue-400 p-1 rounded text-white'>改变组件</button><hr className='mt-2'/><Demo /></>);
};

600

如何避免呢? 其实官方已经提供了这个优化的方案,那就是使用memo,你仅仅且包裹住这个组件即可!

const Demo = memo(() => {console.log('Demo render');return (<div>我是子组件</div>);
});

memo的作用就是对比组件重新render前后的 **props是否发生变化*:如果没有发生变化,则不会重新render。
但是注意他仅比较基本类型,如果是对象则会比较引用地址,如下则每次还都会重新render:

const Demo = memo((props) => {console.log('Demo render');return (<div>我是子组件</div>);
});const App = () => {console.log('App render');const [count, setCount] = useState(0);const doInc = () => {setCount(count + 1);};const info = {title: '子组件'};return (<><div>{count}</div><button onClick={doInc} className='bg-blue-400 p-1 rounded text-white'>改变组件</button><hr className='mt-2'/><Demo info={info}/></>);
};

原因也很简单,因为每次App组件的重新render,就会导致info是一个新创建的对象,引用地址自然就不同了!
解决办法:使用useMemo包裹住这个对象即可,这样这个对象就会被缓存下来不会被App重建!

const Demo = memo((props) => {console.log('Demo render');return (<div>我是子组件</div>);
});const App = () => {console.log('App render');const [count, setCount] = useState(0);const doInc = () => {setCount(count + 1);};const info = useMemo(()=>({title: '子组件'}),[]);return (<><div>{count}</div><button onClick={doInc} className='bg-blue-400 p-1 rounded text-white'>改变组件</button><hr className='mt-2'/><Demo info={info}/></>);
};

tips: useMemo一般用于缓存对象,如果是函数react还提供了useCallback,作用一样!

http://www.hskmm.com/?act=detail&tid=15701

相关文章:

  • 从研发效能到知识中枢:Gitee Wiki如何重塑企业知识管理范式
  • Gitee DevSecOps平台:军工软件研发的智能化革命
  • 杆状病毒表达系统为何成为蛋白表达首选
  • 日记3
  • Gitee如何重塑中国开发者的代码托管体验
  • 模块化面向对象 2章
  • css `isolation: isolate` - 详解
  • Debezium + Kafka + Flink/Doris Stream Load 实时数仓
  • Gitee DevOps平台:中国企业数字化转型的代码管理新范式
  • Ansible + Docker 部署 Zookeeper 集群
  • 幂运算与航班中转的奇妙旅行:探索算法世界的两极 - 实践
  • Gemini CLI 配置问题
  • 本土化与全球化博弈下的项目管理工具选型:Gitee如何为中国企业破局?
  • 论Linux安装后需要进行的配置
  • 51单片机-驱动DS1302时钟芯片模块教程 - 实践
  • tomato WP复盘
  • SQLite的并发问题
  • 域渗透靶场-vulntarget-a综合靶场
  • 数组和链表读取、插入、删除以及查找的区别
  • day 09 课程
  • 在K8S中,日志分析工具有哪些可以与K8S集群通讯?
  • 在K8S中,网络通信模式有哪些?
  • 一文教你搞定PASS 2025:样本量计算神器安装到使用全流程
  • React 18.2中采用React Router 6.4
  • 题解:AT_abc257_h [ABC257Ex] Dice Sum 2
  • ClickHouse UPDATE 机制详解 - 若
  • ClickHouse index_granularity 详解 - 若
  • P13885 [蓝桥杯 2023 省 Java/Python A] 反异或 01 串
  • clickhouse轻量级更新 - 若
  • 西电PCB设计指南第3章学习笔记