美文网首页
React中的性能优化点

React中的性能优化点

作者: huyaoyao | 来源:发表于2018-10-04 10:25 被阅读0次

1. 在constructor中绑定事件函数的this指向

把一个函数赋值给一个变量,然后用那个变量去执行函数会造成this的丢失,所以需要绑定this,把绑定放在构造函数中可以保证只绑定一次函数,如果放在render函数中绑定this的话每次渲染都会去绑定一次this,那样是很耗费性能的。

2. 使用箭头函数也就是异步函数的方式写setState

setState它是一个异步函数,他会合并多次修改,降低diff算法的比对频率。这样也会提升性能。

3. 虚拟DOM的使用

用JS对象描述DOM,而不是真的去调用浏览器API生成真实DOM。这样子啊比对前的生成会极大提升性能。

4. 同层比对

新旧状态的比对时采用同层比对,当发现某节点不一致了直接替换该节点的子树。而不管它的子树是不是真的改动了。

5. key值的使用

在列表循环的时候React会要求每一个列表项有一个独一无二,稳定的key值,它的目的是为了当状态改变时新旧状态的每一个列表项能够对应起来,方便比对。

6. shouldComponentUpdate

当父组件被重新渲染时即render函数执行时,子组件就会默认被重新渲染,但很多时候是不需要重新渲染每一个子组件的。这时就可以使用 shouldComponentUpdate 来判断是否真的需要重新渲染子组件。仅仅一个判断,就可以节约很多的消耗。
所以对于父组件发生变化而子组件不变的情况,使用shouldComponentUpdate会提升性能。

shouldComponentUpdate(nextProps, nextState) {
    if(nextProps.content === this.props.content) {
        return false;
    } else {
        return true;
    }
}

相关文章

  • 【React.js 20】React性能优化

    React性能优化 React性能优化主要分三块: React 组件性能优化 属性传递优化针对单组件性能优化,很多...

  • 深入浅出React和Redux学习笔记(五)

    React组建的性能优化 性能优化的方法: 单个React组件的性能优化; 多个React组件的性能优化; 利用r...

  • 05|React组件的性能优化

    本文主要是针对性能优化做介绍,对应的React本身性能就比较不错!要介绍的点如下: 单个React组件的性能优化 ...

  • Redux源码剖析

    前面写了《React组件性能优化》《Redux性能优化》《React-Redux性能优化》,但是都没有从这些框架的...

  • react性能优化

    React 性能优化 React 性能优化 | 包括原理、技巧、Demo、工具使用[https://juejin....

  • React中的性能优化点

    1. 在constructor中绑定事件函数的this指向 把一个函数赋值给一个变量,然后用那个变量去执行函数会造...

  • React-Redux性能优化

    前面写了两篇文章《React组件性能优化》《Redux性能优化》,分别针对React和Redux在使用上的性能优化...

  • React开发实践7--首页优化的过程

    写在前面 需要说明一点是,关于比较常规的React性能优化,可以看这篇文章:React 16 加载性能优化指南,我...

  • React 组件性能优化

    React 组件性能优化最佳实践 React 组件性能优化的核心是减少渲染真实 DOM 节点的频率,减少 Virt...

  • React 性能优化

    React 性能优化 简单的 todo-list-demo 讲 React 性能优化不能光靠嘴说,得有一个 dem...

网友评论

      本文标题:React中的性能优化点

      本文链接:https://www.haomeiwen.com/subject/mzfxaftx.html