谈谈 PurComponent

是什么

1. PureComponent 会对 props 和 state 进行浅比较，跳过不必要的更新，提高组件性能。
2. PureComponent 组件默认使用的 shouldComponentUpdate 行为，不必自己声明 shouldComponentUpdate

示例

使用 Component

import React, { Component } from "react";
// 子组件
class Foo extends Component {
  render() {
    console.log("foo-render")
    const { num } = this.props;
    return <div>foo-{num}</div>;
  }
}、
// 父组件
class App extends Component {
  state = {
    num: 0,
  };
  handle = () => {
    this.setState({
      num: 0,
    });
  };
  render() {
    const { num } = this.state;
    return (
      <div>
        <button onClick={this.handle}>点我</button>
        <Foo num={num} />
      </div>
    );
  }
}

点击按钮，即使 num 值不变，组件 Foo 仍然更新了，控制台打印了 foo-render

使用 PureComponent

import React, { PureComponent, Component } from "react";
// 子组件
class Foo extends PureComponent {
  render() {
    console.log("foo-render")
    const { num } = this.props;
    return <div>foo-{num}</div>;
  }
}
// 父组件
class App extends Component {
  state = {
    num: 0,
  };
  handle = () => {
    this.setState({
      num: 0,
    });
  };
  render() {
    const { num } = this.state;
    return (
      <div>
        <button onClick={this.handle}>点我</button>
        <Foo num={num} />
      </div>
    );
  }
}

只有 num 值改变时，才会触发 Foo 组件 render

优点

不需要开发者使用 shouldComponentUpdate 就可使用简单的判断是否渲染来提升性能

缺点

由于进行的是浅比较，可能由于深层的数据不一致导致而产生错误的否定判断，从而导致页面得不到更新

  options.push(new Option())
  options.splice(0, 1)
  options[i].name = "Hello"

这些例子都是在原对象上进行修改，由于浅比较是比较指针的异同，所以会认为不需要进行重绘。

解决缺点

1. 一个组件拆分成多个 pureComponent，以这种方式来实现复杂数据结构，以期达到节省不必要渲染的目的
2. 给其赋值一个新的对象或者引用，确保其能够进行重新渲染。
3. 推荐使用 immutable.js。immutable.js 会在每次对原对象进行添加，删除，修改使返回新的对象实例。任何对数据的修改都会导致数据指针的变化。