zoukankan      html  css  js  c++  java
  • React 不可变数据Immutable

     1, 为什么要用到不可变数据 ?

    从React渲染组件性能考虑,使用旧数据创建新数据时,要保证旧数据同时可用,

    并且没有变化的部分还可用,目的是尽量减少不必要的渲染和重绘。 

    如果是简单的赋值给一个新的变量,新旧对象只是名称不同,不进行深比较js认为数据不变。其次,也会带来引入对象浅拷贝的问题,造成不可预测的展示值。

    这对react响应重新渲染造成了性能影响,或不能及时更新dom。

    shouldComponentUpdate 是因为 state值和setState值一样是也会触发更新,但是只到浅比较,对于深层结构没有效率。

    但是做深层拷贝很耗时,于是这才有了Immutable 不可变数据,来提升组件render的效率。

    2, 但是深拷贝,会占用大量的内存和cpu特别是在复杂结构中,如何处理 ?

    引入 Immutable.js 不可变数据插件,使用了结构共享,如果对象中只有一个节点发生变化,只修改这一个节点和受它影响的节点,

    其他节点共享。

    是Facebook工程师 Lee Byron3年时间打造,实现来一套持久化数据结构,

    如:Collection  List  Map  Set  Record等,获取数据和普通对象不同

    如:map.get('key') 获取对象值

    如:array.get(0) 相当于 array[0]

    3, 示例

    import { Map }  from 'immutable';

    let a = Map({

      select: 'users',

      filter: Map({ name: 'Kim' })

    })

    let b = a.set('select', 'people');

    a === b // false

    a.get('filter') === b.get('filter');  // true .

    或者使用es6 结构赋值

    obj1 = { ...obj1 , a:2 }  // 旧对象必须写在前面。
    obj1 = { ...obj1 }        // 表示 浅复制,不是拷贝的副本是值的引用。

    4, 疑问

    为啥不用JSON.stringify()  JSON.parse()  构建新的对象呢,何必耗费精力够一个 Immutable.js  感觉对react性能提升有点劳动大于回报,不理解。。

  • 相关阅读:
    PHP生成PDF并转换成图片爬过的坑
    PHAR系列之导言
    Linux学习之路(三)Shell脚本初探
    Linux学习之路(二)
    php 隐藏手机号中间几位
    tp 递归菜单列表【树状】
    php导出excel封装类
    php 导出Excel表格
    php字符串之翻转单词顺序列
    laravel实现跳转其他控制器
  • 原文地址:https://www.cnblogs.com/the-last/p/11441147.html
Copyright © 2011-2022 走看看