React系列之 Immutable

cc17 发布于2019-08-20 11:11 / 1359人阅读

摘要：原文地址什么是是指一旦被创建就不可以被改变的数据，通过使用不可变数据可以让我们很方便的去处理数据的状态变化检测等问题，而且让我们的程序变得更加的可预见怎么用大体使用深度转换和为和浅转换给倒数第一个赋值更多可以查看这里为什么要用其实从上面

原文地址：https://gmiam.com/post/react-...

什么是 Immutable Data ？

Immutable Data 是指一旦被创建就不可以被改变的数据，通过使用不可变数据可以让我们很方便的去处理数据的状态、变化检测等问题，而且让我们的程序变得更加的可预见

怎么用？

npm install immutable

var Immutable = require("immutable");
var map1 = Immutable.Map({a:1, b:2, c:3});
var map2 = map1.set("b", 50);
map1.get("b"); // 2
map2.get("b"); // 50

大体使用 API

// 深度转换 JS Object 和 Array 为 Immutable Map 和 List
Immutable.fromJS({a: {b: [10, 20, 30]}, c: 40})

// Immutable.List 浅转换
const $arr1 = Immutable.List([1, 2, 3]); 
$arr1.size
// => 3

// 给倒数第一个赋值
const $arr2 = $arr1.set(-1, 0);
// => List [ 1, 2, 0 ]

const $arr3 = $arr1.insert(1, 1.5);
// => List [ 1, 1.5, 2, 3 ]

const $arr4 = $arr1.clear()
// => List []

const $arr5 = $arr1.get(0)
// => 1

// Immutable Map
const $map1 = Immutable.fromJS({ a: {b: 1} ,c:2});
$map1.size
// => 2

const $map2 = $map1.update("c",()=>3)
// => Map { "a": Map { "b": 1 }, "c": 3 }

const $map3 = $map1.updateIn("a.b",()=>3)
// => Map { "a": Map { "b": 3 }, "c": 2 }

const $map4 = $map1.merge({d:4})
// => Map { "a": Map { "b": 1 }, "c": 2, "d": 4 }

更多可以查看这里

为什么要用 Immutable

其实从上面的简单例子可以看出来对原数据的操作我们重新生成一个新的而不影响原来的就好了

JQ 有提供 $.extend 可以实现浅拷贝与深拷贝，另外 ES6 也提供原生的方法 Object. assign (浅拷贝)，但其实我们大多数情况我们的数据都很复杂，浅拷贝满足不了，然而对于深拷贝 Immutable 的性能很高

这是因为一般深拷贝都是把所以节点全都复制一遍，而 Immutable 使用结构共享，及对象树中的一个节点变化则只会修改这个节点和受她影响的父节点，其他节进行共享，可以看下下面这个图感受下

配合 React 使用

来看一下上一章留下的问题

import React from "react"
import PureRenderMixin from "react-addons-pure-render-mixin"
import { Map } from "immutable"

var Test = React.createClass( {
  mixins: [ PureRenderMixin ],
  getInitialState: function () {
    return { value: { foo: "bar" } }
  },
  onClick: function () {
    this.setState( {
      value: { foo: "bar" }
    })
  },
  render: function () {
    console.log( "re-render" )
    return (
      click
    )
  }
})

由于对比的是俩个引用不同的对象，所以每次都会触发 re-render，使用 Immutable 后

var Test = React.createClass( {
  mixins: [ PureRenderMixin ],
  getInitialState: function () {
    return { value: Map( { foo: "bar" }) }
  },
  onClick: function () {
    this.setState(( {value}) => ( {
      value: value.set( "foo", "bar" )
    }) )
  },
  render: function () {
    console.log( "re-render" )
    return (
      click
    )
  }
})

值相同时 Immutable 会返回同一个引用，所以比对后，不会触发 re-render

对于父组件

React.createClass({
  getInitialState: function() {
    return { value: { foo: "bar" } };
  },

  onClick: function() {
    var value = this.state.value;
    value.foo += "bar"; // ANTI-PATTERN!
    this.setState({ value: value });
  },

  render: function() {
    return (
      
        
        Click me
      
    );
  }
});

改造后

var Test = React.createClass( {
  getInitialState: function () {
    return { value: Map( { foo: "bar" }) };
  },
  onClick: function () {
    this.setState(( {value}) => ( {
      value: value.update( "foo", v => v + "bar" )
    }) );
  },
  render: function () {
    return (
      
        
        Click me
      
    );
  }
});

可以预见的是组件一定会更新，因为每次 Immutable Data 更改都会返回一个新对象，而不影响原来对象~

云服务器 GPU云服务器系列之系列之二架构之坑系列 Immutable

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80443.html

少妇白洁系列之React StateUp Pattern, Explained

摘要：本文用于阐述模式的算法和数学背景，以及解释了它为什么是里最完美的状态管理实现。欢迎大家讨论和发表意见。本文用于阐述StateUp模式的算法和数学背景，以及解释了它为什么是React里最完美的状态管理实现。关于StateUp模式请参阅：https://segmentfault.com/a/11... P-State, V-State 如果要做组件的态封装，从组件内部看，存在两种不同的...

20171112 2019-08-20 14:50 评论0 收藏0
SegmentFault 技术周刊 Vol.16 - 浅入浅出 JavaScript 函数式编程

摘要：函数式编程，一看这个词，简直就是学院派的典范。所以这期周刊，我们就重点引入的函数式编程，浅入浅出，一窥函数式编程的思想，可能让你对编程语言的理解更加融会贯通一些。但从根本上来说，函数式编程就是关于如使用通用的可复用函数进行组合编程。 showImg(https://segmentfault.com/img/bVGQuc); 函数式编程（Functional Programming），一...

csRyan 2019-08-22 10:50 评论0 收藏0
React-redux进阶之Immutable.js

摘要：的优势保证不可变每次通过操作的对象都会返回一个新的对象丰富的性能好通过字典树对数据结构的共享的问题与原生交互不友好通过生成的对象在操作上与原生不同，如访问属性，。 Immutable.js Immutable的优势 1. 保证不可变（每次通过Immutable.js操作的对象都会返回一个新的对象） 2. 丰富的API 3. 性能好（通过字典树对数据结构的共享） Immutab...

孙淑建 2019-08-23 15:09 评论0 收藏0
2017-09-23 前端日报

摘要：知乎专栏前端给不了解前端的同学讲前端掘金前端够得到安全跨站请求伪造掘金前端面试问题持续更新掘金向核心贡献代码的六个步骤基于的仿音乐移动端个人文章用构建组件网易严选感受开发已完结掘金英文 2017-09-23 前端日报精选 [译] 网络现状：性能提升指南前端够得到Web安全3--点击劫持/UI-覆盖攻击React, Jest, Flow, Immutable.js将改用MIT开源协议N...

BingqiChen 2019-08-21 16:42 评论0 收藏0
一个基于React整套技术栈+Node.js的前端页面制作工具

摘要：是一个前端页面制作工具，方便产品，运营和视觉的同学迅速开发简单的前端页面，从而可以解放前端同学的工作量。支持恢复现场功能关闭页面配置不丢失支持操作。提供了一个方法，用于的拆分。就是发出的通知，表示应该要发生变化了。 pagemaker是一个前端页面制作工具，方便产品，运营和视觉的同学迅速开发简单的前端页面，从而可以解放前端同学的工作量。此项目创意来自网易乐得内部项目nfop中的page...

ermaoL 2019-08-26 11:46 评论0 收藏0