React性能优化：深入理解Pure Render检查机制-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00468/article/details/148375475

React性能优化：深入理解Pure Render检查机制

react-bits ✨ React patterns, techniques, tips and tricks ✨ 项目地址: https://gitcode.com/gh_mirrors/re/react-bits

什么是Pure Render？

在React应用开发中，性能优化是一个永恒的话题。Pure Render（纯渲染）是指组件通过实现shouldComponentUpdate方法并进行浅层比较（shallow equality checks）来优化渲染性能的技术。

React提供了多种实现Pure Render的方式：

React.PureComponent基类
PureRenderMixin混入
recompose/pure等高阶组件

为什么需要Pure Render？

当组件的props或state发生变化时，React会重新渲染该组件及其子组件。通过实现Pure Render，我们可以避免不必要的渲染，从而提升应用性能。

常见问题案例与解决方案

案例1：默认数组导致的性能问题

问题代码

class Table extends PureComponent {
  render() {
    return (
      <div>
        {this.props.items.map(i =>
          <Cell data={i} options={this.props.options || []}/>
        )}
      </div>
    );
  }
}

问题分析：

使用|| []会在每次渲染时创建一个新的空数组实例
即使this.props.options未变化，新的数组实例也会导致浅比较失败
所有Cell组件都会重新渲染，即使只有一个单元格真正需要更新

优化方案

const defaultval = [];  // 在模块作用域中定义常量

class Table extends PureComponent {
  render() {
    return (
      <div>
        {this.props.items.map(i =>
          <Cell data={i} options={this.props.options || defaultval}/>
        )}
      </div>
    );
  }
}

优化点：

将默认数组提取为模块级常量
每次比较都使用同一个数组引用
或者使用defaultProps定义默认值

案例2：函数绑定问题

问题代码

class App extends PureComponent {
  render() {
    return <MyInput onChange={e => this.props.update(e.target.value)}/>;
  }
}

或

class App extends PureComponent {
  update(e) {
    this.props.update(e.target.value);
  }

  render() {
    return <MyInput onChange={this.update.bind(this)}/>;
  }
}

问题分析：

箭头函数和bind都会在每次渲染时创建新的函数实例
新的函数实例会导致浅比较失败
子组件每次都会重新渲染

优化方案

class App extends PureComponent {
  constructor(props) {
    super(props);
    this.update = this.update.bind(this);  // 提前绑定
  }

  update(e) {
    this.props.update(e.target.value);
  }

  render() {
    return <MyInput onChange={this.update}/>;
  }
}

优化点：

在构造函数中提前绑定方法
确保每次渲染都返回相同的函数引用

案例3：对象与函数的多重问题

问题代码

class Component extends React.Component {
  state = {clicked: false};

  onClick() {
    this.setState({clicked: true})
  }

  render() {
    const options = this.props.options || {test: 1};

    return <Something
      options={options}
      onClick={this.onClick.bind(this)}
      onTouchTap={(event) => this.onClick(event)}
    />
  }
}

问题分析：

默认对象{test: 1}每次渲染都会新建
bind和箭头函数每次渲染都会创建新函数
多重问题叠加导致性能严重下降

优化方案

class Component extends React.Component {
  state = {clicked: false};
  options = {test: 1};  // 实例属性

  onClick = () => {  // 类属性箭头函数
    this.setState({clicked: true})
  };

  render() {
    const options = this.props.options || this.options;

    return <Something
      options={options}
      onClick={this.onClick}
      onTouchTap={this.onClick}
    />
  }
}

优化点：