细说React组件性能优化

React 组件性能优化最佳实践

React 组件性能优化的核心是减少渲染真实 DOM 节点的频率，减少 Virtual DOM 比对的频率。如果子组件未发生数据改变不渲染子组件。

组件卸载前进行清理操作

以下代码在组件挂载时会创建一个interval组件销毁后清除定时器，间隔1秒会触发渲染count+1，组件销毁后如果不清除定时器它会一直消耗资源

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 (
    <button onClick={
   () => ReactDOM.unmountComponentAtNode(document.getElementById("root"))}>      {
   index}    </button>
  )
}

export default App
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

每次数据更新都会触发组件重新渲染，这里的优化为：组件销毁清理定时器

类组件使用纯组件PureComponent

什么是纯组件

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

什么是浅层比较

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

为什么不直接进行 diff 操作, 而是要先进行浅层比较，浅层比较难道没有性能消耗吗

和进行 diff 比较操作相比，浅层比较将消耗更少的性能。diff 操作会重新遍历整颗 virtualDOM 树, 而浅层比较只操作当前组件的 state 和 props。

import React from "react"
export default class App extends React.Component {
   
  constructor() {
   
    super()
    this.state = {
   name: "张三"}
  }
  updateName() {
   
    setInterval(() => this.setState({
   name: "张三"}), 1000)
  }
  componentDidMount() {
   
    this.updateName()
  }
  render() {
   
    return (
      <div>
        <RegularComponent name={
   this.state.name} />
        <PureChildComponent name={
   this.state.name} />
      </div>
    )
  }
}

class RegularComponent extends React.Component {
   
  render() {
   
    console.log("RegularComponent")
    return <div>{
   this.props.name}</div>
  }
}

class PureChildComponent extends React.PureComponent {
   
  render() {
   
    console.log("PureChildComponent")
    return <div>{
   this.props.name}</div>
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

组件挂载以后会有一个定时器间隔1秒设置一次name，我们可以看到RegularComponent一直在渲染，即使数据没有发生变化也会渲染。PureChildComponent只有一次渲染，因此使用纯组件会对props state进行进行比较，数据相同不会重新渲染。

shouldComponentUpdate

纯组件只能进行浅层比较，要进行深层比较，使用 shouldComponentUpdate，它用于编写自定义比较逻辑。

返回 true 重新渲染组件，返回 false 阻止重新渲染。

函数的第一个参数为 nextProps, 第二个参数为 nextState。

import React from "react"

export default class App extends React.
1
2