immutable深拷贝：数据多层属性-不可变数据结构

一、为何要用immutable深拷贝？

1.浅拷贝（浅复制）

//引用赋值-浅复制、浅拷贝

var obj={

    name:"溜溜球"

}

var obj2=obj;

obj2.name="刘刘球";

console.log(obj);//name:"刘刘球"

console.log(obj2);//name:"刘刘球"

2.object.assign()一级属性复制，比浅复制多赋值一层，不是真正的深复制

//比浅复制多赋值一层，不是真正的深复制

var myobj={

    name:"六六球",

    like:["打球","rapper"]

}

var myobj2={

    ...myobj

};

myobj2.name="66球";

myobj2.like.splice(0,1)

console.log(myobj);

console.log(myobj2);

3.const obj1 = JSON.parse(JSON.stringify(obj)); 数组，对象都好用的方法(缺点: 不能有undefined)

//json-parse json-stringify
var jsonobj={
    name:"遛遛",
    like:["下棋","swage"],
}
var jsonobj2=JSON.parse(JSON.stringify(jsonobj));
jsonobj2.name="66";
jsonobj2.like.splice(0,1);
console.log(jsonobj);
console.log(jsonobj2);

有undefined时被丢弃

//json-parse json-stringify
var jsonobj={
    name:"遛遛",
    like:["下棋","swage"],
    age:undefined
}
var jsonobj2=JSON.parse(JSON.stringify(jsonobj));
jsonobj2.name="66";
jsonobj2.like.splice(0,1);
console.log(jsonobj);
console.log(jsonobj2);

Immutable 实现的原理是 Persistent Data Structure（持久化数据结构），也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗，Immutable 使用了 Structural Sharing（结构共享），即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享

二、使用

1.安装：npm install immutable

2.mmutable中常用类型（Map，List）

①Map（对象）

import React, { Component } from 'react';
import {Map} from 'immutable';
var obj={
    name:"六六",
    age:17
}
var oldImmuObj=Map(obj);
var newmmuObj=oldImmuObj.set( 'name',"66");
console.log(oldImmuObj,newmmuObj);
//1.get获取immutable
console.log(oldImmuObj.get('name'),newmmuObj.get('name'));
//2.immutable转为普通对象
console.log(oldImmuObj.toJS(),newmmuObj.toJS());

②List(数组)

import React, { Component } from 'react';
import { List } from 'immutable';

var list=List([1,2,3]);
var list2=list.push([4,5]);
var list3=list.unshift(0);
console.log(list.toJS(),list2.toJS(),list3.toJS());
//push, set, unshift or splice 都可以直接用，返回一个新的immutable对象

toJS()：将复杂对象转为普通对象

③.map与list案例

1.复杂案例

import React, { Component } from 'react';
import { List,Map } from 'immutable';

class update extends Component {
    state={
        info:Map({
            name:"溜溜球",
            location:Map({
                provice:"四川",
                city:"成都"
            }),
            favor:List(["读书","看包","写代码"])
        })
    }
    render() {
        return (
            <div>
                <button onClick={()=>{
                    this.setState({
                        info:this.state.info.set("name","66球").set("location",this.state.info.get("location").set("provice","广东").set("city","深圳"))
                    })
                }}>修改</button>
                <div>{this.state.info.get("name")}</div>
                 <div>{this.state.info.get("location").get("provice")}-{this.state.info.get("location").get("city",)}</div>
                  <div> 
                    <ol>
                    {
                    this.state.info.get("favor").map((item,index)=>
                      <li key={item}>{item}<button onClick={()=>{
                        this.setState({
                            info:this.state.info.set("favor",this.state.info.get("favor").splice(index,1))
                        })
                      }}>删除</button></li>   
                    )
                    }
                    </ol>
                </div>
            </div>
        );
    }
}

export default update;

2.fromJS()方法将普通对象转为复杂对象，自动加上List和Map.提供了获取方法getIn()，设置新值方法setIn()，回调函数更新updateIn().

/*
 * @Author: Spring
 * @LastEditors: Aidam_Bo
 * @LastEditTime: 2023-05-29 17:26:15
 */
import React, { Component } from 'react';
import { fromJS} from 'immutable';

class update extends Component {
    state={
        info:fromJS({
            name:"溜溜球",
            location:{
                provice:"四川",
                city:"成都"
            },
            favor:["读书","看包","写代码"]
        })
    }
    
    componentDidMount() {
        console.log("fromJS",this.state.info);
    }
    
    render() {
        return (
            <div>
                <button onClick={()=>{
                    this.setState({
                        info:this.state.info.set("name","66球").setIn(["location","provice"],"广东").setIn(["location","city"],"深圳")
                    })
                }}>修改</button>
                <div>{this.state.info.get("name")}</div>
                 <div>{this.state.info.getIn(["location","provice"])}-{this.state.info.getIn(["location","city"])}</div>
                  <div> 
                    <ol>
                    {
                    this.state.info.get("favor").map((item,index)=>
                      <li key={item}>{item}<button onClick={()=>{
                        this.setState({
                            info:this.state.info.updateIn(["favor"],(list)=>list.splice(index,1))
                        })
                      }}>删除</button></li>   
                    )
                    }
                    </ol>
                </div>
            </div>
        );
    }
}

export default update;

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/24043.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！