性能！！让你的 React 组件跑得再快一点

时间 2019-11-29

原文原文链接

原创不易，但愿能关注下咱们，再顺手点个赞~~

本文首发于政采云前端团队博客：性能！！让你的 React 组件跑得再快一点前端

性能和渲染（Render）正相关

React 基于虚拟 DOM 和高效 Diff 算法的完美配合，实现了对 DOM 最小粒度的更新。大多数状况下，React 对 DOM 的渲染效率足以咱们的业务平常。但在个别复杂业务场景下，性能问题依然会困扰咱们。此时须要采起一些措施来提高运行性能，其很重要的一个方向，就是避免没必要要的渲染（Render）。react

渲染（Render）时影响性能的点

React 的处理 render 的基本思惟模式是每次一有变更就会去从新渲染整个应用。在 Virtual DOM 没有出现以前，最简单的方法就是直接调用 innerHTML。Virtual DOM 厉害的地方并非说它比直接操做 DOM 快，而是说无论数据怎么变，都会尽可能以最小的代价去更新 DOM。React 将 render 函数返回的虚拟 DOM 树与老的进行比较，从而肯定 DOM 要不要更新、怎么更新。当 DOM 树很大时，遍历两棵树进行各类比对仍是至关耗性能的，特别是在顶层 setState 一个微小的修改，默认会去遍历整棵树。尽管 React 使用高度优化的 Diff 算法，可是这个过程仍然会损耗性能。算法

渲染（Render）什么时候会被触发

○ 组件挂载

React 组件构建并将 DOM 元素插入页面的过程称为挂载。当组件首次渲染的时候会调用 render，这个过程不可避免。编程

○ setState() 方法被调用

setState 是 React 中最经常使用的命令，一般状况下，执行 setState 会触发 render。可是这里有个点值得关注，执行 setState 的时候必定会从新渲染吗？答案是不必定。当 setState 传入 null 的时候，并不会触发 render ，能够运行下面的 Demo 来佐证：数组

class App extends React.Component {
  state = {
    a: 1
  };

  render() {
    console.log("render");
    return (
      <> <p>{this.state.a}</p> <button onClick={() => { this.setState({ a: 1 }); // 这里并无改变 a 的值 }} > Click me </button> <button onClick={() => this.setState(null)}>setState null</button> <Child /> </> ); } } 复制代码

○ 父组件从新渲染

只要父组件从新渲染了，默认状况下，即便传入子组件的 props 未发生变化，那么子组件也会从新渲染，进而触发 render。缓存

咱们对上面的 demo 进行稍微的修改，能够看出当点击按钮的时候，Child 组件的 props 并无发生变化，可是也触发了 render 方法：数据结构

const Child = () => {
  console.log("child render");
  return <div>child</div>;
};

class App extends React.Component {
  state = {
    a: 1
  };

  render() {
    console.log("render");
    return (
      <> <p>{this.state.a}</p> <button onClick={() => { this.setState({ a: 1 }); }} > Click me </button> <button onClick={() => this.setState(null)}>setState null</button> <Child /> </> ); } } 复制代码

优化 Render 咱们能作什么？

上文描述的 React 组件渲染机制实际上是一种较好的作法，很好地避免了在每一次状态更新以后，须要去手动执行从新渲染的相关操做。鱼和熊掌不可兼得，带来方便的同时也会存在一些问题，当子组件过多或者组件的层级嵌套过深时，由于反反复复从新渲染状态没有改变的组件，可能会增长渲染时间又会影响用户体验，此时就须要对 React 的 render 进行优化。框架

上面说了没必要要的 render 会带来性能问题，所以咱们的主要优化思路就是减小没必要要的 render。前端性能

○ shouldComponentUpdate 和 PureComponent

在 React 类组件中，能够利用 shouldComponentUpdate 或者 PureComponent 来减小因父组件更新而触发子组件的 render，从而达到目的。shouldComponentUpdate 来决定是否组件是否从新渲染，若是不但愿组件从新渲染，返回 false 便可。函数

在 React 中 PureComponet 的源码为

if (this._compositeType === CompositeTypes.PureClass) {
  shouldUpdate = !shallowEqual(prevProps, nextProps) || ! shallowEqual(inst.state, nextState);
}
复制代码

看函数名就可以理解，PureComponet 经过对 props 和 state的浅比较结果来实现 shouldComponentUpdate，当对象包含复杂的数据结构时，可能就不灵了，对象深层的数据已改变却没有触发 render。

看到这里，顺便看一下 shallowEqual 是如何实现的。

const hasOwnProperty = Object.prototype.hasOwnProperty;

/** * is 方法来判断两个值是不是相等的值，为什么这么写能够移步 MDN 的文档 * https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/is */
function is(x: mixed, y: mixed): boolean {
  if (x === y) {
    return x !== 0 || y !== 0 || 1 / x === 1 / y;
  } else {
    return x !== x && y !== y;
  }
}

function shallowEqual(objA: mixed, objB: mixed): boolean {
  // 首先对基本类型进行比较
  if (is(objA, objB)) {
    return true;
  }

  if (typeof objA !== 'object' || objA === null ||
      typeof objB !== 'object' || objB === null) {
    return false;
  }

  const keysA = Object.keys(objA);
  const keysB = Object.keys(objB);
	
  // 长度不相等直接返回false
  if (keysA.length !== keysB.length) {
    return false;
  }

  // key相等的状况下，再去循环比较
  for (let i = 0; i < keysA.length; i++) {
    if (
      !hasOwnProperty.call(objB, keysA[i]) ||
      !is(objA[keysA[i]], objB[keysA[i]])
    ) {
      return false;
    }
  }

  return true;
}
复制代码

○ 利用高阶组件

在函数组件中，并无 shouldComponentUpdate 这个生命周期，能够利用高阶组件，封装一个相似 PureComponet 的功能

const shouldComponentUpdate = arePropsEqual => BaseComponent => {
  class ShouldComponentUpdate extends React.Component {
    shouldComponentUpdate(nextProps) {
      return arePropsEqual(this.props, nextProps)
    }
    
    render() {
      return <BaseComponent {...this.props} /> } } ShouldComponentUpdate.displayName = `Pure(${BaseComponent.displayName})`; return ShouldComponentUpdate; } const Pure = BaseComponent => { const hoc = shouldComponentUpdate( (props, nextProps) => !shallowEqual(props, nextProps) ) return hoc(BaseComponent); } 复制代码

使用 Pure 高阶组件的时候，只须要对咱们的子组件进行装饰便可。

import React from 'react';

const Child = (props) => <div>{props.name}</div>;

export default Pure(Child);
复制代码

○ 使用 React.memo

React.memo 是 React 16.6 新的一个 API，用来缓存组件的渲染，避免没必要要的更新，其实也是一个高阶组件，与 PureComponent 十分相似，但不一样的是， React.memo 只能用于函数组件。

基本用法

import { memo } from 'react';

function Button(props) {
  // Component code
}

export default memo(Button);
复制代码

高级用法

默认状况下其只会对 props 作浅层对比，遇到层级比较深的复杂对象时，表示力不从心了。对于特定的业务场景，可能须要相似 shouldComponentUpdate 这样的 API，这时经过 memo 的第二个参数来实现：

function arePropsEqual(prevProps, nextProps) {
  // your code
  return prevProps === nextProps;
}

export default memo(Button, arePropsEqual);
复制代码

注意：与 shouldComponentUpdate 不一样的是，arePropsEqual 返回 true 时，不会触发 render，若是返回 false，则会。而 shouldComponentUpdate 恰好与其相反。

○ 合理拆分组件

微服务的核心思想是：以更轻、更小的粒度来纵向拆分应用，各个小应用可以独立选择技术、发展、部署。咱们在开发组件的过程当中也能用到相似的思想。试想当一个整个页面只有一个组件时，不管哪处改动都会触发整个页面的从新渲染。在对组件进行拆分以后，render 的粒度更加精细，性能也能获得必定的提高。

总结

本文主要介绍了如何减小没必要要的 render 来提高 React 的性能。在实际开发过程当中，前端性能问题可能并不常见，随着业务的复杂度增长，遇到性能问题的几率也会随之增长。

减小 render 的次数类组件可使用 shouldComponentUpdate 或 PureComponent，函数组件能够利用高级组件的特性或者 React.memo
对组件进行合理的拆分

在摸索这些解决方案的同时，咱们可以学习到诸多经典的编程思想，从而更加合理的运用框架、技术解决业务问题。

招贤纳士

政采云前端团队（ZooTeam），一个年轻富有激情和创造力的前端团队，隶属于政采云产品研发部，Base 在风景如画的杭州。团队现有 50 余个前端小伙伴，平均年龄 27 岁，近 3 成是全栈工程师，妥妥的青年风暴团。成员构成既有来自于阿里、网易的“老”兵，也有浙大、中科大、杭电等校的应届新人。团队在平常的业务对接以外，还在物料体系、工程平台、搭建平台、性能体验、云端应用、数据分析及可视化等方向进行技术探索和实战，推进并落地了一系列的内部技术产品，持续探索前端技术体系的新边界。

若是你想改变一直被事折腾，但愿开始能折腾事；若是你想改变一直被告诫须要多些想法，却无从破局；若是你想改变你有能力去作成那个结果，却不须要你；若是你想改变你想作成的事须要一个团队去支撑，但没你带人的位置；若是你想改变既定的节奏，将会是“ 5 年工做时间 3 年工做经验”；若是你想改变原本悟性不错，但老是有那一层窗户纸的模糊… 若是你相信相信的力量，相信平凡人能成就非凡事，相信能遇到更好的本身。若是你但愿参与到随着业务腾飞的过程，亲手推进一个有着深刻的业务理解、完善的技术体系、技术创造价值、影响力外溢的前端团队的成长历程，我以为咱们该聊聊。任什么时候间，等着你写点什么，发给 ZooTeam@cai-inc.com