六、【React拓展】Component的2个效率问题
admin
2024-03-07 09:14:12

文章目录

  • 1、Component的2个问题
  • 2、期望
  • 3、原因
  • 4、解决方案
    • 4.1、方案一
    • 4.2、方案二
    • 4.3、函数式组件方案

1、Component的2个问题

  1. 只要执行 setState()；即使不改变状态数据，组件也会重新 render() —— 效率低
  2. 只要父组件重新 render(), 子组件就会自动重新 render()，纵使子组件没有用到父组件的任何数据 —— 效率低

2、期望

  • 只有当组件的state或props数据发生改变时才重新render()

3、原因

  • Component中的shouldComponentUpdate()总是返回true

4、解决方案

4.1、方案一

  • 重写 shouldComponentUpdate() 方法

比较新旧state或props数据, 如果有变化才返回true，如果没有返回false

4.2、方案二

  • 使用 PureComponent 替换 Component

PureComponent 重写了 shouldComponentUpdate()，只有 state 或 props 数据有变化才返回 true

注意:
只是进行 state 和 props 数据的浅比较，如果只是数据对象内部数据变了，返回 false
不要直接修改 state 数据，而是要产生新数据

  • 项目中一般使用 PureComponent 来优化

4.3、函数式组件方案

  • 使用 React.memo

上一篇：Day9-[KMP]难不倒我

下一篇：最大流之上下界可行流

相关内容

热门资讯

齐某（男，25岁）摆拍“吸阳气... （来源：上观新闻）1月17日，成都市公安局武侯区分局发布警情通报：近日，我局接群众举报，反映有网络博...
最新或2023（历届）中秋节最... 　　最新或2023（历届）中秋节最新微信祝福语　　潜伏了一年的中秋终于再现江湖。在这个充满传说洋溢着...
美容院发给客户的中秋节祝福语最... 　　美容院发给客户的中秋节祝福语最新或2023（历届）　　中秋之夜，好风如水，明月如诗，此时，总有无...
最新或2023（历届）给情人的... 　　给你发这条短信的原因有五个。一、想你;二、无聊;三、证明一下你是否停机;四、告诉你我没有停机;五...
最新或2023（历届）中秋节祝... 　　最新或2023（历届）中秋节祝福语　　1、中秋佳节月儿圆，圆出全家聚一堂;桂花散香飘祥瑞，嫦娥送...