03月
24

我们可以做哪些优化呢？

发表于 • 分类于

静态资源优化

将静态资源按版本缓存到 ServiceWorker 或者 locaStorage

不常更新的第三方依赖包，用 dllPlugin 抽成多个模块，每个保持 200kb 以下，放到 CDN。

接口请求优化

串行的接口、大量并行的接口请求都会拖慢首屏的渲染。

解决方法：服务端渲染首页 或者 构建 BFF 层，为接口消费方提供服务。

react 性能优化

  • 当父组件 state 变化，导致子组件频繁更新（子组件无需更新的情况）

用 shouldComponentUpdate 生命周期来控制子组件更新，return false 则无需更新

或者直接用 PureComponet。 通过对 props 和 state 的浅比较结果来实现。大多数情况下可以直接使用这个，复杂数据结构时手动控制是否 re-render

PureComponet 一般给无状态组件用，有状态组件自行 shouldComponentUpdate

代码优化

  • 变量访问速度优化
1
2
3
4
5
6
const { a, b } = this.state

let query = {
  aaa: a,
  bbb: b
}

为什么要从 state 里解构出变量呢？

因为数据访问速度有快慢之分，下面列出几个影响数据访问速度的因素：

  • 字面量与局部变量的访问速度最快，数组元素和对象成员相对较慢
  • 变量从局部作用域到全局作用域的搜索过程越长速度越慢
  • 对象嵌套的越深，读取速度就越慢
  • 对象在原型链中存在的位置越深，找到它的速度就越慢

推荐的做法是缓存对象成员值。将对象成员值缓存到局部变量中会加快访问速度

如果用到 this.state.a 2 次以上，那么解构出 a，就是有意义的，当然了，对象过于庞大可能就不适合这样做了。

关于 react 组件中事件绑定 this 的方式与性能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// 方法1 构造函数中bind
class Toggle extends React.Component {
  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {}

  render() {
    return <button onClick={this.handleClick}></button>
  }
}

// 方法2 public class fields 语法
class Toggle extends React.Component {
  handleClick = () => {
    console.log('this is:', this)
  }

  render() {
    return <button onClick={this.handleClick}>Click me</button>
  }
}

// 方法3 行内箭头函数或bind
// 此语法问题在于每次渲染 Logging 时都会创建不同的回调函数。在大多数情况下，这没什么问题，但如果该回调函数作为 prop 传入子组件时，这些组件可能会进行额外的重新渲染。我们通常建议在构造器中绑定或使用 class fields 语法来避免这类性能问题。

class Toggle extends React.Component {
  handleClick() {
    console.log('this is:', this)
  }

  render() {
    return (
      <div>
        <button onClick={e => this.handleClick(e)}>Click me</button>
        <button onClick={this.handleClick.bind(this)}>Click me</button>
      </div>
    )
  }
}

关于 react list key

一般情况下，直接使用数组的 index 作为 key，这没什么不好的，毕竟，懒得去问后端，你这个 list 里面哪个是具有唯一性的

那什么情况下，我们不能用 index 作为 key 呢，比如，需要对 list 做增删改等操作时(包括排序)，如果用 index 作为 key，会导致状态紊乱、性能变差等问题。相关文章

分享到：