前端性能优化之React/Vue-变化吧

二叶草

1214
文章

0
评论

2020年2月3日22:25:08优化评论阅读模式

React：

由于只要状态发生变化(state，props)，组件就会重新渲染，那么，如何避免重复渲染：
- 使用shouldComponentUpdate生命周期钩子函数来对比前后的state和props，看是否变化，进而确定是否需要重新渲染。如果你的组件非常简单，状态只由props来决定，我们也可以使用PureComponent，来满足大部分的场景。如下：
- ```
class Test extends React.PureComponent {    render() {        return (          <div>            {this.props.value || 'Loading......'}          </div>        )    }}
```
- 2.尽量使用函数式组件，这样可以尽量避免没有必要的渲染。
不要在渲染函数当中放置无用代码，我们都知道Render函数就是一个负责渲染的纯函数，所以一些无用的逻辑代码一定放在render函数外面。
在遍历列表的时候添加key属性，由于key主要作用就是为了实现组件的复用，最好不要使用数组的索引，而要使用其唯一的身份标识，因为如果是中间元素发生变化，由于索引的特殊性，后面所有元素都需要进行更新，因此尽量使用它的唯一身份标识。
使用stateless component，也就是我们常说的函数式组件，它没有生命周期方法，只有一个render方法，对于一些简单组件完全可以使用函数式组件来完成，React内部对于这类组件有专门的优化。

谨慎使用setState，开发当中如果遇到和视图无关的，但有变化的数据，不要放在state里面，这个时候我们可以直接写成组件内私有变量或者组件实例上的变量。如下：

class Test extends Component {  record = false  onMouseDown = () => {    this.record = true;  }  onMouseUp = () => {    this.record = false;  }  render() {    return (<div>      <button onMouseDown={this.onMouseDown} onMouseUp={this.onMouseUp} />    <div/>);  }}

使用不可变数据，使用不可变数据让状态变得可预测，可选用immutable.js，它是Facebook官方推出的持久性数据结构的库，保证了结构共享和持久性数据结构，对于提高性能有着非常大的帮助。
简化props，复杂的props会使组件难以维护，而且如果props的数据结构过于复杂，也会影响shallowCompare，导致组件无法准确刷新，所以当你的props过于复杂的时候，就要考虑将组件进行拆分。

Vue：

遍历列表的时候添加key属性，原因和React一样，底层都是通过虚拟DOM比较前后变动，然后应用到真正的DOM当中。
使用异步组件，在大型应用当中，我们常常需要使用代码分割这种方式，来避免过长时间的加载，而Vue官方正好为我们提供了异步组件这种方式，来保证只有在我们需要的时候才从服务端拉取。方法如下：
```
Vue.component('async-example', function (resolve, reject) {  setTimeout(function () {    // 向 `resolve` 回调传递组件定义    resolve({      template: '<div>I am async!</div>'    })  }, 1000)})
```
提取组件当中的CSS到单独文件，如果把JavaScript代码和CSS代码放到一起，运行时CSS会以style标签的方式通过JavaScript注入，这对运行时的性能有一定影响，因此CSS最好单独分离出来。
使用Function-based API，Vue3.0会撤销Class API，逐步向Function-based API过渡，原因是相比Class API，Function-based API有更好的TypeScript 类型推导支持，更灵活的逻辑复用能力，Tree-shaking 友好，代码更容易被压缩等一系列优势。
使用扁平化的store数据结构，很多时候我们接口返回的数据结构嵌套非常深，如果我们把这样的数据直接存储到store当中，我们取的时候非常不方便，对性能也会造成一定影响，所以我们先将数据结构处理成扁平化结构再进行存储。