网络技术问题 | React.js 测验 | 第 2 组 | 问题 1

本次测验主要涉及 React.js 技术中一些常见的问题。下面我们来看一下问题 1。

问题描述

如何避免 React 组件中的无谓渲染（unnecessary render）？

解决方案

PureRenderMixin

由于 React 会默认重新渲染组件，开发者有时候需要避免无谓渲染，从而提高整个应用的性能。React 提供了一个名为 PureRenderMixin 的 mixin 来解决这个问题。可以将其添加到需要优化的组件上，从而在 props 或 state 发生变化时只进行必要的渲染，提高性能。

import React from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin';

export default class Example extends React.Component {
  constructor(props) {
    super(props);
    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
  }

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

React.memo

自 React 16.6 版本起，React 提供了一个新的 API：React.memo。该 API 可以用来优化前面例子中的组件，从而减少无谓渲染。React.memo 和 shouldComponentUpdate 很相似，都是通过 props 的浅比较来判断组件是否需要更新。使用 React.memo 时只需要将组件包裹在高阶函数中即可。

import React, { memo } from 'react';

const Example = memo(function Example(props) {
  return <div>{props.text}</div>;
});

使用 shouldComponentUpdate 组件生命周期方法

除了使用 PureRenderMixin 和 React.memo 之外，React 还提供了 shouldComponentUpdate 这个生命周期方法，开发者可以手动实现组件是否需要更新。该方法返回一个布尔值，用于判断是否需要更新组件。当然，使用该方法时需要小心操作，避免造成渲染过于频繁或者过于稀少的情况。

import React from 'react';

export default class Example extends React.Component {
  shouldComponentUpdate(nextProps) {
    if (this.props.text === nextProps.text) {
      return false;
    }
    return true;
  }

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

总结

本篇文章介绍了如何避免 React 组件中的无谓渲染，分别从使用 PureRenderMixin、React.memo 和 shouldComponentUpdate 三个方面进行了讲解。

Markdown 代码如下：

# 网络技术问题 | React.js 测验 | 第 2 组 | 问题 1

本次测验主要涉及 React.js 技术中一些常见的问题。下面我们来看一下问题 1。

## 问题描述

如何避免 React 组件中的无谓渲染（unnecessary render）？

## 解决方案

### PureRenderMixin

由于 React 会默认重新渲染组件，开发者有时候需要避免无谓渲染，从而提高整个应用的性能。React 提供了一个名为 PureRenderMixin 的 mixin 来解决这个问题。可以将其添加到需要优化的组件上，从而在 props 或 state 发生变化时只进行必要的渲染，提高性能。

```javascript
import React from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin';

export default class Example extends React.Component {
  constructor(props) {
    super(props);
    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
  }

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

React.memo

自 React 16.6 版本起，React 提供了一个新的 API：React.memo。该 API 可以用来优化前面例子中的组件，从而减少无谓渲染。React.memo 和 shouldComponentUpdate 很相似，都是通过 props 的浅比较来判断组件是否需要更新。使用 React.memo 时只需要将组件包裹在高阶函数中即可。

import React, { memo } from 'react';

const Example = memo(function Example(props) {
  return <div>{props.text}</div>;
});

使用 shouldComponentUpdate 组件生命周期方法

除了使用 PureRenderMixin 和 React.memo 之外，React 还提供了 shouldComponentUpdate 这个生命周期方法，开发者可以手动实现组件是否需要更新。该方法返回一个布尔值，用于判断是否需要更新组件。当然，使用该方法时需要小心操作，避免造成渲染过于频繁或者过于稀少的情况。

import React from 'react';

export default class Example extends React.Component {
  shouldComponentUpdate(nextProps) {
    if (this.props.text === nextProps.text) {
      return false;
    }
    return true;
  }

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

总结

本篇文章介绍了如何避免 React 组件中的无谓渲染，分别从使用 PureRenderMixin、React.memo 和 shouldComponentUpdate 三个方面进行了讲解。