React 性能优化相关

使用生产环境版本的库

避免不必要的渲染

React 生命周期提供了 shouldComponentUpdate 方法，默认返回 true，若返回 false，组件此次的更新将停止。我们可以把该方法作为钩子，在该方法中根据组件自身业务逻辑决定返回 true 还是 false。如下:

class MyComponent extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    if (nextProps.item === this.props.item) {
      return false;
    }
    return true;
  }
}

React 还提供了一个 PureComponent 组件，该组件会使用浅比较来比较新旧 props 和 state，因此可以通过让组件继承 PureComponent 来替代手写 shouldComponentUpdate 的逻辑。但是，使用浅比较很容易因为直接修改数据而产生错误

class NumberList extends PureComponent {
  constructor() {
    super();
    this.state = {
      numbers: [1, 2, 3, 4],
    };
  }
  handleClick = () => {
    const numbers = this.state.numbers;
    numbers.push(numbers[numbers.length - 1] + 1);
    this.setState({
      numbers,
    });
  };
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>add</button>
        {this.state.numbers.map(item => (
          <div>{item}</div>
        ))}
      </div>
    );
  }
}

点击 Button, NumberList 并不会重新调用 render，因为 handleClick 中是直接修改 this.state.numbers 这个数组的 this.state.numbers 的引用在 setState 前后没有改变，所以 shouldComponentUpdate 会返回 false。

使用 key

---

本章介绍了虚拟 DOM 机制以及用于虚拟 DOM 比较的 Diff 算法，虚拟 DOM 是 React 应用高效运行的基础。