React性能优化整理

时间: 2019-09-22阅读: 687标签: 性能

class 组件的优化

通过判断减少数据变化触发的重新渲染, 以及之后的 DOM diff

shouldComponentUpdate(nextProps, nextState) {
  if (this.props.color !== nextProps.color) {
    return true;
  }
  if (this.state.count !== nextState.count) {
    return true;
  }
  return false;
}

JavaScript 对象引用问题

函数式语言当中, 语言设计允许两个对象一样, 举例 Clojure:

(= {:a 1} {:a 1}) ; true

(identical? {:a 1} {:a 1}) ; false

递归匹配, 性能并不高.

JavaScript 对象基于引用传值, 比较单一

{a: 1} === {a: 1} // false

大体方案, 通过手动维护, 让相同的数据尽量保证引用一致, 控制性能.

function updateColorMap(colormap) {
  return {...colormap, right: 'blue'};
}

useMemo 优化

每个函数体当中生成的对象都会有新的引用, useMemo 可以保留一致的引用.

const myObject = useMemo(() => ({ key: "value" }), [])

注意: 用花括号直接写对象基本上就是新的引用了,

{}
{a: 1}

{...obj}

一般组件内部不变的对象, 都是从 state, ref, 再或者组件外全局有一个引用.


react.memo 优化

判断参数是否改变, 如果没有改变, 就直接复用已有的组件, 不重新生成:

const MyComponent = react.memo(function MyComponent(props) {
  /* only rerenders if props change */
});

react.memo 有第二个参数, 用于自定义判断的规则:

const MemoItem = react.memo(Item, (prevProps, nextProps) => {
  if (prevProps.item.selected === nextProps.item.selected) {
    return true;
  }
  return false;
});

useCallback 优化

使用 react.memo 包裹组件:

let Inner: FC<{
  onClick: () => void
}> = react.memo((props) => {
  return <div>
    <span>inner</span>
    </div>;
});

使用 useCallback

let Outer: FC<{}> = react.memo((props) => {
  const [counter, setCounter] = useState(0);
  const onClick = useCallback(()=>{ 
    setCounter(prevState => ++prevState)
  },[]);
  return <div>
    <span>outer: {counter}</span>
    <Inner onClick={onClick} />
  </div>;
});

避免 render 当中的 DOM 操作

let NewComponent: FC<{}> = react.memo((props) => {

  let elRef = useRef<htmldivElement>()

  // 错误写法
  if (elRef.current) {
    elRef.current.style.color = 'red'
  }

  return <div ref={elRef}></div>;
});

DOM 发生改变的时候, 一般会有比较多后续的布局和 compose 计算去绘制新的界面.

特别是在脚本执行过程当中发生的话, 会对性能有明显影响.

脚本执行完再执行, 让浏览器自动处理(合并, 避免频繁 DOM 操作).


业务相关

  • immer 对优化方案的影响
  • Rex 组件当中优化的坑
  • 路由相关的优化
  • 性能调试

Immer 对优化方案的影响

let a = {}
let b = produce(a, draft => {
  draft.b = 1
})

a === b // false

如果数据不发生改变, 直接用原始数据.

(Hooks API 之后, 数据被拆散了, 可以减少 immer 的使用.)


Rex 当中优化的相关

class 组件, 高阶组件当中自动做了基础的优化.

shouldComponentUpdate(nextProps: IRexDataLayerProps, nextState: any) {
  if (!shallowequal(nextProps.parentProps, this.props.parentProps)) return true;
  if (!shallowequal(nextProps.computedProps, this.props.computedProps)) return true;
  return false;
}

Hook API, 没有中间一层组件, 直接触发当前组件更新, 存在性能问题.(还要考虑优化方案)

let contextData = useRexContext((store: IGlobalStore) => {
  return {
    data: store.data,
    homeData: store.homeData,
  };
});

业务当中一般可以接受, 因为数据通常都是在更新的. 新能敏感场景需要额外考虑.


ruled-router 提供的优化

/home/plant/123/shop/456/789

解析为

{
  "raw": "home",
  "name": "home",
  "matches": true,
  "restPath": ["plant", "123", "shop", "456", "789"],
  "params": {},
  "data": {},
  "next": {
    "raw": "plant/:plantId",
    "name": "plant",
    "matches": true,
    "restPath": ["shop", "456", "789"],
    "params": {
      "plantId": "123"
    },
    "data": {
      "plantId": "123"
    },
    "next": {
      "raw": "shop/:shopId/:corner",
      "name": "shop",
      "matches": true,
      "next": null,
      "restPath": [],
      "data": {
        "shopId": "456",
        "corner": "789"
      },
      "params": {
        "plantId": "123",
        "shopId": "456",
        "corner": "789"
      }
    }
  }
}

生成对象保存起来, 路由发生变更时再重新解析. 这样对象引用一般保持一致.

来自:https://segmentfault.com/a/1190000020769066


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/6081

JavaScript 对象迭代方法与性能比较

Object.entries返回对象所有可枚举的键值对,不会追寻原型链上的 key,Object.keys返回对象所有可枚举的键

页面渲染性能控制-重绘与回流

页面的显示过程分为以下几个阶段:生成DOM树(包括display:none的节点),在DOM树的基础上根据节点的集合属性(margin,padding,width,height等)生成render树

Js中的调节器:提高应用程序的性能

调节器是浏览器中通过限制代码要处理的事件数量来提高性能的常用技术。当你想以受控的速率执行回调时,应该使用调节器,它允许你在每个固定的时间间隔内重复处理过渡状态。

JS如何提高扩展运算符的性能?

当被扩展的数组位于数组的开头时,由于快速路径优化,您可以获得性能提升。它适用于V8引擎7.2版本(Chrome v72和NodeJS v12附带的特性)。通过此优化,性能测试显示[... array, item]的执行速度至少比[item, ...array]快两倍

php中一些提高性能的技巧

【概述】* 把类定义成static* echo比print快* 用全等号代替双等,减少类型转换* echo用逗号连接字符串效率高* require比require_once()快,并且尽量不要使用相对路径

vue + webpack 前端性能优化

对于程序开发者而言,开发一个项目不仅仅注重效率和功能,前端的性能问题也是非常重要的。这直接影响用户的体验,从而间接的也反应该项目质量的好坏

优化网站性能规则_前端性能优化策略【网络加载、页面渲染】

前端网站性能优化规则:网络加载类、页面渲染类。包括:减少 HTTP 资源请求次数、减小 HTTP 请求大小、避免页面中空的 href 和 src、合理设置 Etag 和 Last-Modified、使用可缓存的 AJAX、减少 DOM 元素数量和深度等

Netty高性能之道

在IO编程过程中,当需要同时处理多个客户端接入请求时,可以利用多线程或者IO多路复用技术进行处理。Netty的零拷贝主要体现在如下三个方面,随着JVM虚拟机和JIT即时编译技术的发展,对象的分配和回收是个非常轻量级的工作。

Nginx 性能调优实战

Nginx运行工作进程个数一般设置CPU的核心或者核心数x2。如果不了解cpu的核数,可以top命令之后按1看出来,也可以查看/proc/cpuinfo文件 grep ^processor /proc/cpuinfo | wc -l

2018 前端性能检查表

性能十分重要。然而,我们真的知道性能瓶颈具体在哪儿吗?是执行复杂的 JavaScript,下载缓慢的 Web 字体,巨大的图片,还是卡顿的渲染?研究摇树(Tree Shaking),作用域提升(Scope Hoisting)

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广