美文网首页
React中使用Immutable

React中使用Immutable

作者: LTA | 来源:发表于2018-07-06 20:45 被阅读0次
  • 前言
    在JS中因为使用了引用复制,所以其对象是可变的(Mutable),新的对象只是简单的引用原始的对象,改变心的对象将影响到原来的对象。引用对象的优点是可以节省内存,但当应用复杂之后就会照常非常大的隐患。此时我们通常的做法是使用shallowCopy或者deepCopy来避免对象别修改,这样做造成了CPU和内存的浪费。所Immutable出现了。
  • Immutable基础知识
    Immutable的特点是,一但被创建就不能被修改。对immutable对象的修改都将返回一个新的immutable对象。三大特征: 持久化数据结构、结构共享、惰性操作
    优点:
    1、Immutable降低了Mutable带来的复杂度
     function touchAndLog(touchFn) {
        let data = { key: 'value' };
        touchFn(data);
        console.log(data.key); // 猜猜会打印什么?
     }
    
    在不查看 touchFn 的代码的情况下,因为不确定它对 data 做了什么,你是不可能知道会打印什么(这 不是废话吗)。但如果 data 是 Immutable 的呢,你可以很肯定的知道打印的是 value。
    2、节省内存
    Immutable使用的结构共享会尽可能复用内存
    let a = immutable.Map({name: 'lta', userId: '890425'})
    let b = a.set('name', 'xtt')
    a === b //false
    a.get('name') === b.get('name')  // false
    a.get('userId') === b.get('userId')  // true
    
    在上面的代码中a和b共享了没有变化的节点userId
    缺点:
    1、需要学习新的API
    2、增加了资源文件的大小
    3、容易与原生对象混淆

相关文章

  • Redux 中使用 immutable

    初始化 安装依赖在 react 中,使用 immutable 需要两个依赖:immutable 和 redux-i...

  • RN-在redux中使用Immutable、优化shouldCo

    immutable用法Immutable 详解及 React 中实践 所有数据出入state用Immutable类...

  • collect

    Immutable Immutable React + Rdeux example react+webpack+e...

  • Immutable 详解及 React 中实践

    Immutable 详解及 React 中实践

  • Immutable简介

    1.# Immutable 常用API简介2.Immutable 详解及 React 中实践 : https://...

  • 2018-01-09

    Immutable Updates in React and Redux React和Redux中的不可变更新 H...

  • React中使用Immutable

    前言在JS中因为使用了引用复制,所以其对象是可变的(Mutable),新的对象只是简单的引用原始的对象,改变心的对...

  • React中使用Immutable

    什么是Immutable Immutable是一旦创建,就不能被更改的数据。对Immutable对象的任何修改或添...

  • 使用immutable优化React

    React在减少重复渲染方面确实是有一套独特的处理办法,那就是虚拟DOM,但显然在首次渲染的时候React绝无可能...

  • immutable.js笔记

    介绍 immutable不可变对象,react使用它性能很容易提升很多。react提升性能的关键点就是避免重复渲染...

网友评论

      本文标题:React中使用Immutable

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