react shouldComponentUpdate

对比vue，性能优化对react更加重要，shouldComponentUpdate又是react中性能重要的一个特性。

shouldComponentUpdate是react的一个生命周期，顾名思义，就是用于设置是否进行组件更新

后面都使用SCU缩写指代shouldComponentUpdate

SCU的基本使用

说到性能优化之前，我们要先说一下SCU的用法：

• 它有两个参数：
  • nextProps：更新后的props属性
  • nextState：更新后的state状态
• 这个生命周期中，如果返回true代表会触发重新渲染，为false则不会；默认是返回true
• 在这个生命周期中，我们可以根据某个状态，来手动设置是否触发重新渲染

下面这个例子中，设置只有计数count状态改变时，才触发渲染，否则则不渲染

import React, {Component} from 'react'

class SCU extends Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 0,
      name: '小花'
    }
  }
  // 是否进行更新的生命周期，它有两个参数，它允许我们自定义是否更新，默认返回true
  // nextProps：更新后的props属性
  // nextState: 更新后的state状态
  shouldComponentUpdate(nextProps, nextState) {
    // 现在设置只有count改变时，才触发重新渲染
    if(nextState.count === this.state.count) {
      return false;
    }
    return true;
  }
  render() {
    const { count, name } = this.state
    // 第二个为要放至的dom元素位置
    return <div>
      <p>count: {count}</p>
      <p>name: {name}</p>
      <button onClick={this.changeCount}>累加count</button>
      <button onClick = {this.changeName}>不改变count，改变其它state状态</button>
    </div>
  }
  changeCount = () => {
    this.setState({count: this.state.count + 1})
  }
  changeName = () => {
    this.setState({name: '小小'})
    console.log(this.state.name)
  }

}
export default SCU

当改变this.state.name时，因为在SCU做了判断，没改变到count的，虽然name变了，但不会触发视图更新

scu
当改变count时，就发现视图更新了，说明 scu中的设置生效了
image.png

什么时候用SCU?

react在SCU中是默认返回true的，也就是说，只要父组件更新，那么所有的子组件都会无条件跟着更新，即使这个子组件内容没有任何更新。

但在日常开发中，我们常常是只需要更新其中一个或几个子组件，其它未有任何改变的子组件，我们并不希望它重新渲染，这时候就要会用到SCU来优化。

下面以一个例子说明：
Todolist 清单，它有三个子组件：

• TodoInput：输入框，和提交按钮
• List：todolist，列表显示组件
• Footer：一些其它的描述信息

// TodoList.js
import React, { Component } from 'react';
import TodoInput from './TodoInput'
import List from './List'
import Footer from './Footer'

export default class TodoList extends Component {
  constructor(props) {
    super(props)
    this.state = {
      list: [
        {id: 0, title: '吃饭'},
        {id: 1, title: '睡觉'}
      ],
      footer: '页尾信息'
    }
  }
  render() {
    return <div>
      <TodoInput updateList={this.updateList} />
      <List list={this.state.list}/>
      <hr/>
      <Footer footer={this.state.footer}/>
    </div>
  }
  updateList = (val) => {
    this.setState({
      list: this.state.list.concat({
        id: this.state.list.length,
        title: val
      })
    })
  }
}

// TodoInput.js
import React, { Component } from 'react';

export default class TodoInput extends Component {
  constructor(props) {
    super(props)
    this.state = {
      inputValue: ''
    }
  }
  render() {
    const { inputValue } = this.state
    return <div>
      <input type="text" value={inputValue} onChange={(e) => this.changeInput(e)} />
      <button onClick={() => this.props.updateList(this.state.inputValue)}>新增</button>
    </div>
  }
  changeInput = (e) => {
    this.setState({
      inputValue: e.target.value
    })
  }
}

// List.js  列表组件
export default function List(props) {
  return <div>
    {props.list.map(item => {
      return <p key={item.id}>{item.title}</p>
    })}
  </div>
}

// Footer.js
import React, { Component } from 'react';

export default class Footer extends Component {
  componentDidUpdate() {
    console.log('Footer组件更新');
  }
  render() {
    return <p>{this.props.footer}</p>
  }
}

当新增一项事项时，发现Footer组件即使没更新内容，也被重新渲染了

image.png

这其实就是一种性能的浪费，因为本身是没必要渲染的，只有Footer的内容footer更新时，我们才需要更新这个组件，所以可以在SCU中优化：

// Footer.js

shouldComponentUpdate(nextProps, nextState) {
     // 只有footer改变时，才重新渲染
    if(nextProps.footer !== this.props.footer) {
      return true;
    }
    return false;
  }

此时，再去新增事项时，就不会触发Footer组件重新渲染了

image.png

SCU必须配合不可变值一起使用

这是因为如果不使用不可变值时，那么对象的改变其实还是引用同一个地址，那么在SCU做对比时，就不可避免要一次性递归比较里面所有的内容：

• 使用可变量来修改时
  在SCU时，要一次性递归遍历对象的每一项才能准确判断出两者是否相等，下面是使用lodash库的isEqual方法来一次性递归遍历，当对象层级很深时，可想而知，是极其浪费性能的

changeList = () => {
  // 使用可变量，SCU要付出极大代价，不建议使用
    this.state.list.push({
      id: this.state.list.length,
      title: 'xxx'
    })
    this.setState({
      list: this.state.list
    })
}
    
shouldComponentUpdate(nextProps, nextState) {
    // _isEqual要深层遍历每一项是否相等，才可以准确判断
    if(_.isEqual(nextState.list !== this.state.list) {
      return true;
    }
    return false;
  }

• 使用不可变量来修改时
  使用不可变量来修改时，因为新对象使用的是新的引用地址，所以在SCU比对时，只需要浅对比，就可以判断出两者的不同

  updateList = () => {
    // 使用不可变量
    this.setState({
      list: this.state.list.concat({
        id: this.state.list.length,
        title: 'xxx'
      })
    })

  shouldComponentUpdate(nextProps, nextState) {

    // 使用不可变量时使用SCU
    if(nextState.list !== this.state.list) {
      return true;
    }
    return false;
  }

这也是为什么一直强调setState时要遵循react immutable不可变值理念的重要原因

react为什么不直接一开始就SCU优化，而是给用户保留设置？

因为不能保证用户一定遵循immutable理念的写法，如果用户使用可变量来修改时，react在SCU时就要付出极大性能，所以react并不选择在一开始就在SCU优化，而是交给开发者自己选择是否要使用SCU优化

针对于使用了不可变值的组件，react其实提供了PureComponent实现SCU浅比较的优化方案

SCU总结

• SCU默认返回true，即react默认重新渲染所有子组件
• 必须配合不可变值一起使用，不然会有性能问题
• SCU优化并不一定在一开始就要使用，而是在遇到性能问题时，我们才会考虑使用它