React 性能优化（高级）

性能优化对于 React 更加重要

• shouldComponentUpdate（简称 SCU）
• PureComponent 和 React.memo
• 不可变值 immutable.js

shouldComponentUpdate

SCU 基本用法

shouldComponentUpdate(nextProps, nextState, nextContext) {
  if (nextState.count !== this.state.count) {
    return true // 可以渲染
  }
  return false // 不重复渲染
}

SCU 默认返回 true

父组件有更新，子组件则无条件也更新

// 子组件
class Footer extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <p>
      {this.props.text}
    </p>
  }

  componentDidUpdate() {
    // 当更新父组件时，会一直执行此
    console.log('footer add update')
  }

  // shouldComponentUpdate 默认返回 true
  shouldComponentUpdate(nextProps, nextState, nextContext) {
    if (nextProps.text !== this.props.text) {
      return true // 可以渲染
    }
    return false // 不重复渲染
  }

  // React 默认：父组件有更新，子组件则无条件也更新
  // 性能优化对于 React 更加重要
}

// 父组件
class TodoListDemo extends React.Component {
  constructor(props) {
    super(props);  
    this.state = {      
      footerInfo: '底部文字'
    }
  }

  render() {
    return <div>      
      <Footer text={this.state.footerInfo}/>
    </div>
  }
}

SCU 每次都要吗？

• 需要时才优化，比如上面的例子
• 一定要配合不可变值，比如下面的例子

例子

// 子组件
class List extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    // 子组件接收参数
    const {list} = this.props

    return <ul>
      {list.map((item, index) => {
        return <li key={item.id}>
          <span>{item.title}</span>
        </li>
      })}
    </ul>
  }

  // 增加 shouldComponentUpdate
  shouldComponentUpdate(nextProps, nextState, nextContext) {
    // lodash.isEqual 做对象或者数组的深度比较
    if (lodash.isEqual(nextProps.list, this.props.list)) {
      // 相等，则不重复渲染
      return false
    }
    return true // 不相等，则渲染
  }
}

SCU 使用总结

• SCU 默认返回 true，即 React 默认重新渲染所有子组件
• 必须配合“不可变值”一起使用
• 可先不用 SCU，有性能问题时再考虑使用

PureComponent 和 memo

• PureComponent，SCU 中实现了浅比较
• memo，函数组件中的 PureComponent
• 浅比较已适用大部分情况（尽量不要做深度比较）

PureComponent 例子

class PureComponentDemo extends React.PureComponent{
  constructor(props) {
    super(props);
  }

  shouldComponentUpdate() {
    // 浅比较
  }
}

memo 例子

function MyComponent(props) {
  // 使用 props 渲染
}

function areEqual(prevProps, nextProps) {
  // 如果把 nextProps 传入 render 方法的返回结果
  // 与将 prevProps 传入 render 方法的返回结果一致的话则返回 true，
  // 否则返回 false
}

export default React.memo(MyComponent, areEqual)

使用 immutable.js

• 彻底拥抱“不可变值”
• 基于共享数据（不是深拷贝），速度好
• 有一定学习和迁移成本，按需使用

例子

const map1 = Immutable.Map({a: 1, b: 2, c: 3})
const map2 = map1.set('b', 50)
console.log(map1.get('b')) // 2
console.log(map2.get('b')) // 50