React-引领未来的用户界面开发框架-读书笔记（五）

第11章 性能优化

Reactde Dom diff算法使我们能够在任意时间点高效地重新绘制整个用户界面，并保证最小程度的DOM改变，然而，也存在需要对组件进行细致优化的情况，这时就需要渲染一个新的DOM来让应用运行得更加高效。

shouldComponentUpdate

当一个组件更新时，无论是设置了新的props还是调用了setState方法，或者forceUpdate方法，React都会调用该组件所有的子组件的render方法。在大多数时候这样的操作都没有问题，但是在组件树深度嵌套或是render方法十分复杂的页面上，这可能会带来些许延迟。

有时候组件的render方法会在不必要的情况下被调用。比如：组件渲染的过程中，并没有使用props或者state的值，或者组件的props或者state并没有在父组件重新渲染时发生改变。这意味着重新渲染这个组件会得到和已知虚拟DOM一模一样的结果，这样的计算过程是没有必要的。

React提供了一个组件的生命周期方法shouldComponentUpdate，我们可以使用它来帮助React正确判断是否需要调用组件的render方法。

shouldComponentUpdate方法返回一个布尔值。如果返回false就是告诉React不要调用组件的渲染方法，并使用之前渲染好的虚拟DOM；如果返回true则是让React调用组件的渲染方法并计算出新的虚拟DOM。在默认情况下，shouldComponentUpadte方法永远都会返回true，因此组件总是会调用render方法。

组件首次被渲染时，shouldComponentUpdate方法并不会被调用，shouldComponentUpdate方法接受两个参数，即新的props和新的state，以帮助你决定是否应该重新渲染。

不可变性辅助插件

在需要比较对象以确定是否更新时，使用不可变得数据结构让你的shouldComponentUpdate方法变得更加简单。我们可以使用React.addons.update来确保<SurverEditor />组件得不可变性。

React.addons.update接受一个数据结构和一个配置对象。你可以在配置对象中传入$slice、$push、$unshift、$set和$apply。

深入调查拖慢你应用的部分

正如我们在前几小节中提到的那样，给组件添加一个自定义的shouldComponentUpdate方法能够在很大程度上优化程序。

React.addons.Perf插件能够帮助我们找到添加shouldComponentUpdate方法的最佳位置。

键（Key）

多数时候，你会看到列表中使用key属性的情况，它的作用是给React提供一种除组件类之外的识别一个组件的方法。举个例子：假设有一个div组件，它的key属性是foo，后续又将它改成了bar，那么React就会跳过DOM diff，同时完全放弃div所有的子元素，并重新从头开始渲染。

在渲染大型子树以避免diff计算时，这样的设计很有用——因为这种计算就是在浪费时间。除了告诉React什么时候抛弃一个节点之外，很多情况下key还可以在元素顺序改变时候使用，举个例子：

var items=sortBy(this.state.sortingAlgorithm,this.props,items）；
return items.map(funciton (item){
    return <img src={item.src}/}；
});

如果顺序发生改变，React会对元素进行diff操作，并确定出最高效的操作是改变其中几个img元素的src属性。这样的结论其实是非常低效的，同时可能会导致浏览器查询缓存，甚至导致新的网络请求。

要解决这个问题，我们可以给每个img元素简单的添加一些独一无二的字符串或者数字。return <img src={item.src} key={item.id}/>;

这样React得出的结论就不是改变src属性，而是使用insertBefore操作，而这个操作是移动DOM节点最高效的方法。

除了改变顺序外，这个操作同样适用于插入操作（不包括向末尾元素后面插入）。如果没有正确的key属性，在数组开头插入一个项目会导致后续的<img>标签的src属性发生改变。

值得注意的一点是，尽管key看似被作为一个属性传入了，但其实在组件的任何位置都无法实际获取到它。

总结

1. 将shouldComponentUpdate返回值改为true或者false以提升性能。
2. 使用React.addons.Perf来诊断缓慢或不必要的渲染。
3. 使用key来帮助，React识别列表中所有子组件的最小变化。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!