React性能优化

 

目录

1. 组件卸载前进行清理操作

2. PureComponent 

3. shouldComponentUpdate

4. React.memo

5. 使用组件懒加载

6. 使用 Fragment 避免额外标记 

7. 不要使用内联函数定义

8. 在构造函数中进行函数this绑定

9. 类组件中的箭头函数

10. 避免使用内联样式属性 

11. 优化条件渲染

12. 避免重复无限渲染

13. 为组件创建错误边界 

14. 避免数据结构突变 

15. 依赖优化

---

React 组件性能优化的核心是减少渲染真实 DOM 节点的频率，减少 Virtual DOM 比对的频率。

1. 组件卸载前进行清理操作

在组件中为 window 注册的全局事件, 以及定时器, 在组件卸载前要清理掉, 防止组件卸载后继续执行影响应用性能.

需求：开启定时器然后卸载组件，查看组件中的定时器是否还在运行。

//react
import React, { useState, useEffect } from "react"
import ReactDOM from "react-dom"

const App = () => {
  let [index, setIndex] = useState(0)
  useEffect(() => {
    let timer = setInterval(() => {
      setIndex(prev => prev + 1)
      console.log('timer is running...')
    }, 1000)
    return () => clearInterval(timer)
  }, [])
  return (
     ReactDOM.unmountComponentAtNode(document.getElementById("root"))}>
      {index}
    
  )
}

export default App

2. PureComponent 

1. 什么是纯组件

   纯组件会对组件输入数据进行浅层比较，如果当前输入数据和上次输入数据相同，组件不会重新渲染。

2. 什么是浅层比较

   比较引用数据类型在内存中的引用地址是否相同，比较基本数据类型的值是否相同。

3. 如何实现纯组件

   类组件继承 PureComponent 类，函数组件使用 memo 方法

4.