快捷導(dǎo)航

React替換傳統(tǒng)拷貝方法的Immutable使用

更新時間：2023年02月06日 10:04:58 作者：碰磕

Immutable.js出自Facebook，是最流行的不可變數(shù)據(jù)結(jié)構(gòu)的實現(xiàn)之一。它實現(xiàn)了完全的持久化數(shù)據(jù)結(jié)構(gòu)，使用結(jié)構(gòu)共享。所有的更新操作都會返回新的值，但是在內(nèi)部結(jié)構(gòu)是共享的，來減少內(nèi)存占用

immutable

它是一款代替?zhèn)鹘y(tǒng)拷貝方式的第三方庫

優(yōu)勢:

在新對象上操作不會影響原對象的數(shù)據(jù)
性能好

安裝使用

1.下載 npm i immutable

2.導(dǎo)入 import {Map} from 'immutable'

Map

語法:Map(對象)

賦值:set("屬性名","新值")

取值:get("屬性名")

toJS()轉(zhuǎn)回普通對象

import React, { Component } from 'react';
/**
     * 1.下載 npm i immutable
     * 2.導(dǎo)入 import {Map} from 'immutable'
 */
import {Map} from 'immutable'

var obj={
    name:"碰磕",
    age:20
}
var objImmu=Map(obj);
var newobjImmu=objImmu.set("name","pengkeStudy");
// console.log(objImmu,newobjImmu)
//get('屬性')獲取值
console.log(objImmu.get("name"),newobjImmu.get("name"));
//toJS轉(zhuǎn)回普通對象
console.log(objImmu.toJS(),newobjImmu.toJS());
/*
//寫法一
class Immu02 extends Component {
    state={
        info:Map({
            name:"碰磕",
            age:20
        })
    }
    render() {
        return (
            <div>
                Immu02
                <button onClick={()=>{
                    this.setState({
                        info:this.state.info.set('name',"pengkeStudy").set('age',1000)
                    })
                }}>修改它們的值</button>
                {this.state.info.get("name")}----
                {this.state.info.get("age")}
            </div>
        );
    }
}*/
//寫法二
class Immu02 extends Component {
    state={
        info:{
            name:"碰磕",
            age:20
        }
    }
    render() {
        return (
            <div>
                Immu02
                <button onClick={()=>{
                    let old=Map(this.state.info)
                    let newImmu=old.set("name","pengkeStudy").set("age",10000)
                    this.setState({
                        info:newImmu.toJS()
                    })
                }}>修改它們的值</button>
                {this.state.info.name}----
                {this.state.info.age}
            </div>
        );
    }
}
export default Immu02;

嵌套Map

Map中對象中的對象還要套上Map

可以通過map的get方法獲取值向組件傳值.,從而完美的解決了組件的無效刷新

shouldComponentUpdate進行判斷決定是否需要刷新

import React, { Component } from 'react';
import {Map} from 'immutable'
class Immu03 extends Component {
    state={
        info:Map({
            name:"碰磕",
            age:20,
            hobbit:Map({
                likeone:"運動",
                liketwo:"學習"
            })
        })
    }
    render() {
        return (
            <div>
                Immu03
                <button onClick={()=>{this.setState({
                    info:this.state.info.set("name","學習啊啊啊")
                })}}>修改</button>
                {this.state.info.get("name")}
                <Child hobbit={this.state.info.get("hobbit")} ></Child> 
            </div>
        );
    }
}
class Child extends Component{
    shouldComponentUpdate(nextProps,nextState){
        //判斷hobbit的值是否更新
        if(this.props.hobbit===nextProps.hobbit){
            return false;
        }
        return true;
    }
    render(){
        return(
            <div>Child</div>
        );
    }
    componentDidUpdate(){
        console.log("子組件更新了");
    }
}
export default Immu03;

List

可以使用數(shù)組的屬性方法

import React, { Component } from 'react';
import {List} from 'immutable'
var arr=List([1,231,1])
let arr2=arr.push(4)//不會影響原對象結(jié)構(gòu)
let arr3=arr2.concat([12,323,123])
console.log(arr,arr2,arr3);
class Immu04 extends Component {
    state={
        favor:List(['吃飯','睡覺','學習','運動'])
    }
    render() {
        return (
            <div>
                Immu04
                {
                    this.state.favor.map(item=>{
                        return <li key={item}>{item}</li>
                    })
                }
            </div>
        );
    }
}
export default Immu04;

實現(xiàn)個人修改案例

import { List,Map } from 'immutable';
import React, { Component } from 'react';
class Immu05 extends Component {
    state={
        info:Map({
            name:"碰磕",
            location:Map({
                province:"江西",
                city:"吉安"
            }),
            hobbit:List(['睡覺','學習','敲鍵盤'])
        })
    }
    render() {
        return (
            <div>
                <h1>編輯個人信息</h1>
                <div>
                    <button onClick={()=>{
                        this.setState({
                            info:this.state.info.set("name","愛學習").set("location",this.state.info.get("location").set("city","南昌"))
                        })
                    }}>修改</button>
                    {this.state.info.get("name")}
                    <br />
                    {this.state.info.get("location").get("province")}-
                    {this.state.info.get("location").get("city")}
                    {
                        this.state.info.get("hobbit").map((item,index)=><li key={item}>{item}<button onClick={()=>{
                            // console.log(index);
                            this.setState({
                                info:this.state.info.set("hobbit",this.state.info.get("hobbit").splice(index,1))
                            })
                        }}>刪除</button></li>)
                    }
                </div>
            </div>
        );
    }
}
export default Immu05;

通過fromJS、setIn、updateIn進行改進

fromJS將普通對象轉(zhuǎn)換為Immutable
setIn()深度賦值,參數(shù)一為數(shù)組形式填寫需要修改的，參數(shù)二為修改后的值
updateIn()深度修改，參數(shù)一為數(shù)組形式填寫需要修改的，參數(shù)二為回調(diào)函數(shù)(參數(shù)為原對象)

import { fromJS } from 'immutable';
import React, { Component } from 'react';
class Immu06 extends Component {
    state={
        info:fromJS({
            name:"碰磕",
            location:{
                province:"江西",
                city:"吉安"
            },
            hobbit:['睡覺','學習','敲鍵盤']
        })
    }
    render() {
        return (
            <div>
                <h1>編輯個人信息</h1>
                <div>
                    <button onClick={()=>{
                        this.setState({
                            info:this.state.info.setIn(["name"],"愛學習").setIn(["location","city"],"南昌")//setIn("參數(shù)一為數(shù)組","修改后的值")
                        })
                    }}>修改</button>
                    {this.state.info.get("name")}
                    <br />
                    {this.state.info.get("location").get("province")}-
                    {this.state.info.get("location").get("city")}
                    {
                        this.state.info.get("hobbit").map((item,index)=><li key={item}>{item}<button onClick={()=>{
                            // console.log(index);
                            // this.setState({
                            //     info:this.state.info.setIn(["hobbit",index],"")
                            // })
                            //updateIn(需要修改的對象,回調(diào)函數(shù)(參數(shù)為原對象))
                            this.setState({
                                info:this.state.info.updateIn(["hobbit"],(list)=>list.splice(index,1))
                            })
                        }}>刪除</button></li>)
                    }
                </div>
            </div>
        );
    }
}
export default Immu06;

這樣就學費了Immutable~

到此這篇關(guān)于React替換傳統(tǒng)拷貝方法的Immutable使用的文章就介紹到這了,更多相關(guān)React Immutable內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: