React 使用shouldComponentUpdate减少组件重复渲染

Daming 2020-04-20
0条评论 336 次浏览
Daming 2020-04-200条评论 336 次浏览

在react开发中,经常遇到父组件的state props 变化时,会导致该组件下的子组件重复渲染,即使该组件依赖props可能并没有变化~ props没有变化, 子组件的重复渲染是完全没有必要的,造成了性能浪费。



当顶部的组件State变化时,所有子组件会被重新渲染

我们需要做的优化是 当子组件的props变化了(图中绿色部分)再重新渲染子组件。

shouldComponentUpdate(nextProps, nextState)
使用shouldComponentUpdate()以让React知道当前状态或属性的改变是否影响组件的输出,默认返回ture,返回false时不会重写render,而且该方法并不会在初始化渲染或当使用forceUpdate()时被调用。

比对数据,当返回false时 不会重新渲染组件:

shouldComponentUpdate(nextProps, nextState) {
  return nextState.someData !== this.state.someData
}

当数据过多时,不好比对,可使用pureComponent 。

React.PureComponent 与 React.Component 几乎完全相同,但 React.PureComponent 通过props和state的浅对比来实现 shouldComponentUpate()。如果对象包含复杂的数据结构,它可能会因深层的数据不一致而产生错误的否定判断(表现为对象深层的数据已改变视图却没有更新)


重点:

  1. 无论组件是否是 PureComponent,如果定义了 shouldComponentUpdate(),那么会调用它并以它的执行结果来判断是否 update。在组件未定义 shouldComponentUpdate() 的情况下,会判断该组件是否是 PureComponent,如果是的话,会对新旧 props、state 进行 shallowEqual 比较,一旦新旧不一致,会触发 update。

  2. 浅判等 只会比较到两个对象的 ownProperty 是否符合 Object.is() 判等,不会递归地去深层比较—源码

  3. 至于复杂数据结构,用Object.key()获取下key,然后key和对应的value都是基础类型数据,就是算是简单数据结构,不然就是复杂

尽量将复杂类型数据(ArrayList)所关联的视图单独拆成PureComonent有助于提高渲染性能,比如表单、文本域和复杂列表在同一个 render() 中,表单域的输入字段改变会频繁地触发 setState() 从而导致 组件 重新 render()。而用于渲染复杂列表的数据其实并没有变化,但由于重新触发 render(),列表还是会重新渲染。

参考:https://segmentfault.com/a/1190000016494335

1+

发表评论

电子邮件地址不会被公开。