React系列之 Immutable

cc17 發(fā)布于2019-08-20 11:11 / 1369人閱讀

摘要：原文地址什么是是指一旦被創(chuàng)建就不可以被改變的數據，通過使用不可變數據可以讓我們很方便的去處理數據的狀態(tài)變化檢測等問題，而且讓我們的程序變得更加的可預見怎么用大體使用深度轉換和為和淺轉換給倒數第一個賦值更多可以查看這里為什么要用其實從上面

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

什么是 Immutable Data ？

Immutable Data 是指一旦被創(chuàng)建就不可以被改變的數據，通過使用不可變數據可以讓我們很方便的去處理數據的狀態(tài)、變化檢測等問題，而且讓我們的程序變得更加的可預見

怎么用？

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 可以實現(xiàn)淺拷貝與深拷貝，另外 ES6 也提供原生的方法 Object. assign (淺拷貝)，但其實我們大多數情況我們的數據都很復雜，淺拷貝滿足不了，然而對于深拷貝 Immutable 的性能很高

這是因為一般深拷貝都是把所以節(jié)點全都復制一遍，而 Immutable 使用結構共享，及對象樹中的一個節(jié)點變化則只會修改這個節(jié)點和受她影響的父節(jié)點，其他節(jié)進行共享，可以看下下面這個圖感受下

配合 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
    )
  }
})

由于對比的是倆個引用不同的對象，所以每次都會觸發(fā) 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 會返回同一個引用，所以比對后，不會觸發(fā) 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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/80443.html

少婦白潔系列之React StateUp Pattern, Explained

摘要：本文用于闡述模式的算法和數學背景，以及解釋了它為什么是里最完美的狀態(tài)管理實現(xiàn)。歡迎大家討論和發(fā)表意見。本文用于闡述StateUp模式的算法和數學背景，以及解釋了它為什么是React里最完美的狀態(tài)管理實現(xiàn)。關于StateUp模式請參閱：https://segmentfault.com/a/11... P-State, V-State 如果要做組件的態(tài)封裝，從組件內部看，存在兩種不同的...

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

摘要：的優(yōu)勢保證不可變每次通過操作的對象都會返回一個新的對象豐富的性能好通過字典樹對數據結構的共享的問題與原生交互不友好通過生成的對象在操作上與原生不同，如訪問屬性，。 Immutable.js Immutable的優(yōu)勢 1. 保證不可變（每次通過Immutable.js操作的對象都會返回一個新的對象） 2. 豐富的API 3. 性能好（通過字典樹對數據結構的共享） Immutab...

孫淑建 2019-08-23 15:09 評論0 收藏0
2017-09-23 前端日報

摘要：知乎專欄前端給不了解前端的同學講前端掘金前端夠得到安全跨站請求偽造掘金前端面試問題持續(xù)更新掘金向核心貢獻代碼的六個步驟基于的仿音樂移動端個人文章用構建組件網易嚴選感受開發(fā)已完結掘金英文 2017-09-23 前端日報精選 [譯] 網絡現(xiàn)狀：性能提升指南前端夠得到Web安全3--點擊劫持/UI-覆蓋攻擊React, Jest, Flow, Immutable.js將改用MIT開源協(xié)議N...

BingqiChen 2019-08-21 16:42 評論0 收藏0
一個基于React整套技術棧+Node.js的前端頁面制作工具

摘要：是一個前端頁面制作工具，方便產品，運營和視覺的同學迅速開發(fā)簡單的前端頁面，從而可以解放前端同學的工作量。支持恢復現(xiàn)場功能關閉頁面配置不丟失支持操作。提供了一個方法，用于的拆分。就是發(fā)出的通知，表示應該要發(fā)生變化了。 pagemaker是一個前端頁面制作工具，方便產品，運營和視覺的同學迅速開發(fā)簡單的前端頁面，從而可以解放前端同學的工作量。此項目創(chuàng)意來自網易樂得內部項目nfop中的page...

ermaoL 2019-08-26 11:46 評論0 收藏0