React中性能优化的方案

• 减轻state

  • 在state中只存储和组件渲染有关的数据

  • 不做渲染的数据不放在state中，直接挂载在this上即可，比如定时器的id

import { Component } from "react";
​
class App extends Component {
  state = {
    num: 0
  }
  componentDidMount() {
    // dom渲染完成
    // 开启定时器
    // timerid 存储到this中，而不是state中
    this.timerId = setInterval(() => { }, 1000)
  }
  componentWillUnmount() {
    // 卸载
    clearInterval(this.timerId)
  }
  render() {
    return (
      <div id="app">
      </div>
    )
  }
}
export default App

• 避免不必要的重新渲染

  • 使用shoundComponentUpdate钩子函数手动更新组件

  • 使用纯组件 PureComponent自动更新组件，使用方式和component一致

    PureComponent会分别对前后两次props和state进行浅层对比

    浅层比较：

    对于基本数据类型直接比较两个值是否相同

    引用数据类型比较的是地址，所以不要直接修改state中的引用数据类型，应该创建一个新的实例

import { PureComponent } from "react";
​
class App extends PureComponent {
  state = {
    num: 0
  }
  render() {
    console.log('render')
    return (
      <div id="app">
        <button onClick={this.handleClick}>点我</button>
        <hr />
        <div>{this.state.num}</div>
      </div>
    )
  }
  handleClick = () => {
    this.setState({
      num: parseInt(Math.random() * 3)
    })
  }
}
export default App