zoukankan      html  css  js  c++  java
  • react性能优化要点

    1.减少render方法的调用

    1.1继承React.PureComponent(会自动在内部使用shouldComponentUpdate方法对state或props进行浅比较。)或在继承自React.Component类型的组件中使用shouldComponentUpdate方法来决定render方法是否被调用。

    使用浅比较时,如果是对象类型就会出问题,因此最好是使用immutable类型。《immutable在性能优化中的作用》

    1.2在调用组件时,如果某个属性值是函数,避免使用箭头函数,不然每次比较props中该属性时都是不同的。

    <IfEqual  onClick={()=>{}} />

    正确的做法是将onClick中的函数定义为组件的一个方法。

    class App extends React.Component {
        handleClick = () =>{}
        render() {
            return (
                <IfEqual  onClick={this.handleClick} />
            );
        }
    }

    1.3 如果是纯函数组件,从16.6起,可以使用React.memo来实现类似PureComponentshouldComponentUpdate的解决方案。

    <<详细用法>>

    2.避免使用状态提升来共享state,此时应该使用redux解决方案。

    因为组件层次太深的话,在祖先组件中setState会导致无数个子孙组件的render方法再次被调用。(如果不是PureComponent或未使用shouldComponentUpdate方法)

    <<什么时候该用redux>>,该文章里说明了设么时候会发生状态提升。

    3.dom结构的控制

    3.1 保持稳定的dom结构,尽量避免dom节点跨层级移动操作。

    3.2 使用css来隐藏节点,而不是真的移除或添加DOM节点。

    上述两项优化的原因在于:

    由于 React  diff算法是逐层比较virtual tree的节点,同一层级的节点只会做如下操作:1.交互位置、2.添加 3.删除(移动也会被当做删除)

    如上图,A 节点(包括其子节点)整个被移动到 D 节点下,执行过程如下:create A -> create B -> create C ->delete A

  • 相关阅读:
    Javascript继承,再谈
    RHEL7使用systemctl管理服务
    centos7进入单用户模式修改root密码
    IBM DS5020 管理口密码重置
    IBM小机拆镜像换盘
    HMC版本支持
    IBM产品系列和AIX系统版本
    AIX 6.1创建逻辑卷并挂载【smitty】
    AIX中的网络管理
    创建AIX克隆盘
  • 原文地址:https://www.cnblogs.com/94pm/p/12019056.html
Copyright © 2011-2022 走看看