React性能优化指南

1、在专用组件中渲染列表

这点在渲染大型数据集合的时候尤为重要。React在渲染大型数据集合时表现的非常差，因为协调器必须评估每个变化的集合所产生的组件。因此，建议使用专门的组件来映射集合(数组)并且渲染这个组件，切不再渲染其他组件:

不好的:

class MyComponent extends Component {
    render() {
        const {todos, user} = this.props;
        return (<div>
            {user.name}
            <ul>
                {todos.map(todo => <TodoView todo={todo} key={todo.id} />)}
            </ul>
        </div>)
    }
}

在上面例子中，当 user.name 改变时，React 会不必要的协调所有的 TodoView 组件. 尽管TodoView组件不会重新渲染，但是协调的过程本身就非常昂贵.

好的：

class MyComponent extends Component {
    render() {
        const {todos, user} = this.props;
        return (<div>
            {user.name}
            <TodosView todos={todos} />
        </div>)
    }
}

class TodosView extends Component {
    render() {
        const {todos} = this.props;
        return <ul>
            {todos.map(todo => <TodoView todo={todo} key={todo.id} />)}
        </ul>)
    }
}

尽量不要使用数组的索引作为key

许多的开发人员在渲染列表的时候，会使用项目的索引作为key
比如:

{todos.map((todo, index) =>
  <Todo
    {...todo}
    key={index}
  />
)}

这会导致什么问题呢？ 当我们的列表是可变的，比如可以删除，改变位置，因为React diff算法依赖于key 当我们修改了位置后 触发render 那么我们的key 此时的数组索引可能就混乱了

最好：

{todos.map((todo) =>
  <Todo {...todo}
    key={todo.id} />
)}

当然id应该是唯一值，或者使用 shortid 来生成id，但是很多的情况下 我们的 todo 并没有id或者其他肯定是唯一的字段，我们也懒得去生成shortid，我们就是想简简单单的渲染一个不变的列表而已，那么就涉及到一些可以使用 index 作为 key的条件：

• 1、列表和项目是静态的，它们不是计算的，也不会改变.
• 2、列表中的项目没有id;
• 3、列表永远不会重新排序或过滤。
  详细请参考 Index as a key is an anti-pattern