• immutable学习


    React 做性能优化时有一个避免重复渲染的大招,就是使用 shouldComponentUpdate(),但它默认返回 true,即始终会执行 render() 方法,然后做 Virtual DOM 比较,并得出是否需要做真实 DOM 更新,这里往往会带来很多无必要的渲染并成为性能瓶颈。

    当然我们也可以在 shouldComponentUpdate() 中使用使用 deepCopy 和 deepCompare 来避免无必要的 render(),但 deepCopy 和 deepCompare 一般都是非常耗性能的。

    Immutable 则提供了简洁高效的判断数据是否变化的方法,只需 === 和 is 比较就能知道是否需要执行 render()
    而这个操作几乎 0 成本,所以可以极大提高性能。修改后的 shouldComponentUpdate 是这样的:

    import { is } from 'immutable'; shouldComponentUpdate: (nextProps, nextState) => { return !(this.props === nextProps || is(this.props, nextProps)) || !(this.state === nextState || is(this.state, nextState)); }

    最近才开始学习immutable,还没有详细的学习笔记 ,现在这里先记下几个网址,方便后面仔细的看

    深拷贝和immutable的区别是:深拷贝是将原数据完全复制一份,各是各的,而immutable是新的数据是保留了变化的,共用没有变化的数据

    搞定immutable.js:http://boke.io/immutable-js/

    Immutable 详解及 React 中实践:https://www.w3ctech.com/topic/1595

    React + Redux + Immutablejs开发总结

    详细学习:http://www.tuicool.com/articles/YBbEJzJ

    还可以学习;http://www.cnblogs.com/samwu/p/5457031.html

  • 相关阅读:
    学习小记: Kaggle Learn
    eclipse 一些快捷键
    Map接口
    学习笔记
    泛型方法 类 接口
    TreeSet
    xml
    Java笔试题目-my
    迭代器三种遍历方法
    线程请求其他线程资源
  • 原文地址:https://www.cnblogs.com/fireporsche/p/6422973.html
Copyright © 2020-2023  润新知