immutable不可变对象 react小demo immutable-react 简易购物车

immutable不可变对象

immutable介绍

Facebook 工程师使用3年时间打造，与React同期出现，但是没有被默认放到React工具集中，它内部实现了一套完整的数据持久化 里面有很多常见的数据类型Collection List Map Set等

里面有三种重要的数据解构

Map： 键值对集合，对英语Object

Es6中也有专门的Map对象

List： 有序可以重复的列表，对应于Array

set： 无序并且不可重复key的数组

immutable原理

Immutable 实现的原理是（持久化数据结构），也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免深拷贝把所有节点都复制一遍带来的性能损耗，Immutable 使用了（结构共享），即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享。
https://upload-images.jianshu.io/upload_images/2165169-cebb05bca02f1772 演示地址

immutable介绍

Immutable Data就是一但创建，就不能在被改变的数据，对于immutabe对象的任何修改或者添加删除操作都会返回一个新的immutable对象

为什么每次都要返回一个新的immutable对象呢？
因为redux中数据是只读的 如果任意一个使用的位置都可以直接修改redux中的数据 那么可能会影响其他位置引用的内容，造成现实错误

let {Map,List} = require("immutable")
let a=Map({
    name:"lijin",
    age:15,
    love:Map({
        c:Map({
            c2:"hahahh"
        }),
        lovename:"basketball",age:4
    })
})
let a1=Map({
    sex:"男",
    see:Map({
        show:"帅气"
    })
})

let listArrb=List.of("a","b","f")
// console.log(listArrb.size)

// const listArrc=listArrb.set(2,"刚改的")
// console.log(listArrc)

// const listArrc=listArrb.set(12,"刚改的")
// console.log(listArrc)

// const listArrc=listArrb.set(-2,"刚改的")
// const listArrd=listArrc.delete(1)

// const liatArre=listArrb.insert(2,"刚修改")
// console.log(liatArre)

const liatArre=listArrb.update(0,x=>x+"1")
console.log(liatArre)

// console.log(listArrc)
// console.log(listArrd)


// const listArr = List(["a","b","c"])
// console.log(listArr)

// let b=a;
// console.log(b===a)//true
// let c=a.set("name","kobe");
// let d=a.deleteAll(["name"],["age"])

// let g=a.toJS()

// let e = a.clear()
// console.log(e)

// let i = a.toArray()
// console.log(i)


// let f =a.merge(a1).toJS()
// let h =a.merge(a1).toJSON()

// console.log(f)
// console.log(h)



// console.log(d.get("name"))
// console.log(c)
// console.log(c===a)
// console.log("c.name:"+c.get("name"))

##### Map
Map： 键值对集合。

toJS把Map转换成原生的Object，深转换（无论有多少层级都会转换）

toJSON/toObject把Map转换成原生的Object，浅转换（只转换第一层）

toArray 转换成数组 浅转换

##### List:有序可以重复的列表，对应于Array

创建List两种方式：

let listArrb=List.of(“a”,“b”,“f”)

size获取list长度
// console.log(listArrb.size)

set(下标，值)用于设置指定下标的值

delect(下标)删除指定下标

insert()用来更新指定下标的值

update(下标,回掉函数)用于更新指定下标的值

clear()清空并且返回一个空list

push  pop  unshift  shift 和数组方法项功能相同

setSize（）重新设置数组长度，小于原始list会被截取 ，大于会用undefined填充

concat() 把多个list拼接成一个list
merge()是concat()别名

## immutable在react中使用
##### immutable-react 简易购物车
a.jsx

import React, { Component } from 'react'
import B from "../components/b"
import {Map} from "immutable" 
export default class a extends Component {
    constructor(){
        super()
        this.state={
            obj:Map({})
        }
    }
    add=()=>{
        let inpa=this.inpa.value
        let inpb=this.inpb.value
        let newobj=this.state.obj.set(inpa,inpb)
        this.setState({
            obj:newobj
        },()=>{
            console.log(this.state.obj)
        })
        this.inpa.value=""
        this.inpb.value=""
    }
    render() {
        return (
            <div>
               商品名： <input type="text" ref={(inputa)=>{this.inpa=inputa}}/><br></br>
               价格： <input type="text" ref={(inputb)=>{this.inpb=inputb}}/><br></br>
                <button onClick={this.add}>添加</button>
                {this.state.obj.size==0?<p></p>:<B son_obj={this.state.obj.toJS()}></B>}
                
            </div>
        )
    }
}

b.jsx

import React, { Component } from 'react'

export default class b extends Component {
    render() {
        let { son_obj } = this.props
        return (
            <div>
             {  
               Object.keys(son_obj).map((v,i)=>{
                    return(
                    <p key={i}>商品名：{v}-----------商品价格：{son_obj[v]}</p>
                    )
               })
             }
            </div>
        )
    }
}