React 使用

发表于 | 分类于 | 阅读次数：

本文介绍的内容既可以优化 React 性能，也可以作为 React 的使用规范。很高兴和您一起学习和探讨。

PureComponent

PureComponent、Component 跟 shouldComponentUpdate 有什么关系呢？

  1. 当使用如下时，其实就是默认情况下 extends React.Component

    1
    2
    3
    shouldComponentUpdate(nextProps, nextState) {
      return true;
    }

  2. 当使用如下时，相当于 PureComponent

    1
    2
    3
    shouldComponentUpdate(nextProps, nextState) {
      return nextProps !== this.props || nextState !== this.state;
    }

所以重写 shouldComponentUpdate 时，为了不让代码显得冗余，用法不该为以上两种。

render

Lists and Keys

React 官网说明了 Lists keys 能优化性能，可是对为什么不能直接传进 array 的 index， doc.react-china.org/中文文档 的说明却很容易误导读者。

实际上，使用 array 的 index 作为 key 除了影响性能，更重要的原因是它的危险性。

Reference


in-depth explanation on the negative impacts of using an index as a key