Inmutable de datos inmutables

Antes de hablar de datos inmutables (datos inmutables), hablemos de datos mutables.Los datos creados en js nativo son mutables, como:

    var a = {qty:1}
    a.qty = 10;

Algunos amigos pueden decir que se puede usar const, const está bien para los tipos de datos básicos, pero no tiene nada que ver con los tipos de datos de referencia.

    const a = {qty:1}
    a.qty = 10;

    a.qty;// 10

Si el objeto a se asigna a otras variables, causará nuevos problemas, como:

     const a = {qty:1}
     const b = a;

    a.qty = 10;

    b.qty;//10

En este momento, encontrará que los valores de ayb también se modifican. Esta es realmente la forma en que js usa la asignación de referencia para realizar el intercambio de datos. La ventaja es ahorrar memoria, pero las desventajas también son obvias. Un poco de descuido conducirá a cambios. El espinoso problema de A y B. En un proyecto complejo, este tipo de problema no es fácil de solucionar y hay muchos peligros ocultos para la seguridad.

El enfoque anterior era utilizar la copia profunda para resolver este problema. Aunque el problema está resuelto, causará nuevos problemas: pérdida de memoria y algunos escenarios que requieren actualizaciones frecuentes de datos y requisitos de alto rendimiento (como: React ), la copia profunda es en realidad una operación imprudente, por lo que Imutable.jsla emergencia es resolver estos puntos débiles del desarrollo.

Immutable.js Fue construido por el ingeniero de Facebook Lee Byron durante 3 años. La asignación de referencia en js puede ahorrar memoria, pero a medida que la aplicación se vuelve más compleja, el cambio de estado a menudo se convierte en una pesadilla. La práctica habitual es copiar datos para evitar modificaciones. Pero esto ha provocado un consumo de CPU y memoria, e Immutable puede resolver bien estos problemas mediante el uso compartido de estructuras .

Datos inmutables: datos inmutables

Los datos inmutables son datos que no se pueden cambiar una vez creados. Cualquier modificación, adición o eliminación del objeto inmutable devolverá un nuevo objeto inmutable. El principio de implementación inmutable es la estructura de datos persistentes (estructura de datos persistentes), es decir, el método de intercambio de estructura para los datos que no es necesario cambiar, como se muestra a continuación

<! -! [estructura de datos persistentes] (./ img / immutable.js structure sharing.webp "estructura de datos persistentes") ->

Tipos de datos comunes

Lista: conjunto de índices ordenados, similar a Array en JS.
Mapa: conjunto de índices desordenado, similar a Object en JS.
OrderedMap: Mapa ordenado, ordenado según el conjunto () de los datos.
Conjunto: una colección sin valores duplicados.
OrderedSet: Conjunto ordenado, ordenado según los datos agregados.
Pila: una colección ordenada, admite agregar y eliminar usando unshift () y shift ().
Registro: una clase que se utiliza para generar instancias de registro. Similar al objeto de JavaScript, pero solo acepta una cadena específica como clave, con un valor predeterminado.
Seq: secuencia, pero puede que no sea compatible con estructuras de datos específicas.
Colección: es la clase base para construir todas las estructuras de datos y no se puede construir directamente.

Como puede ver, immutable.js Hay muchos tipos de datos, este documento describe los más comunes Listy Mapcorresponde a las matrices y objetos js.

Conversión entre js e inmutable

Mediante fromJS()y toJS()convirtiendo dos js de manera y datos inmutables, como:

    import Immutable from 'immutable';
    const goods = {name:'huawei mate30 pro',price:5998,brand:'huawei'}

    // js -> immutable data
    const imData = Immutable.fromJS(goods)

    // immutable data -> js
    imData.toJS()

Sin embargo fromJS(), la toJS()conversión en profundidad de datos dará como resultado una mayor sobrecarga. Evite el uso tanto como sea posible. La conversión de datos de una sola capa debe usarse Map()y List()convertirse directamente . Además, también puede JSON.stringify()convertir directamente los datos inmutables en cadenas json.

    import {Map,List} from 'immutable';

    const initState = Map({
        breadcrumb:List([]),
        user:Map({}),
        manageMenuStatus:false
    })

Manipular datos inmutables

Obtenga el valor en inmutable:get(key)/getIn(keys)

Los métodos generales de Mapa y Lista se implementan de la siguiente manera

    import {Map,List} from 'immutable';
    let state = Map({
        version:'2.0',
        user:Map({
            username:'laoxie',
            age:18,
            hobby:List(['代码','电影','唱歌'])
        }),
    })

    // 获取 version
    state.get('version');// 2.0

    // 获取username
    state.getIn(['user','username']);// laoxie

    // 获取hobby属性数据
    state.getIn(['user','hobby',1]) // 电影

Nota: A diferencia de los js tradicionales, al getIn() obtener el valor de un conjunto profundo de objetos, no necesita juzgar si existe cada nivel, si no existe, regresará undefined (si no está vacío en JS, se reportará un error)

Agrega los datos en lo inmutable:set(key,val)/setIn(keys,val)
Eliminar atributos:delete(key)/deleteIn(keys)
Actualizar atributos: update(key,val=>newVal)/updateIn(keys,val=>newVal) como se mencionó al principio, los datos inmutables son datos inmutables. Todas las adiciones, eliminaciones y cambios a inmutables no modificarán los datos originales, pero devolverán un nuevo valor, por lo que la variable debe ser reasignada.

    import {Map,List} from 'immutable';
    let state = Map({
        version:'2.0',
        user:Map({
            id:'123',
            username:'laoxie',
            age:18,
            hobby:List(['代码','电影','唱歌'])
        }),
    })
    state.set('version','3.0');
    state.get('version');//state不被修改，所以还是返回2.0

    // 正确的修改方式：修改后重新赋值
    state = state.setIn(['user','age'],20);
    state.getIn(['user','age']);//20

    // update，delete操作同上

Determinar si existe un determinado atributo: has(key)/hasIn(keys) Este también debería ser un método relativamente común en el desarrollo real. Se pueden realizar diferentes operaciones al juzgar si el atributo existe. Por ejemplo, se puede juzgar user.idpara determinar si el usuario está conectado.

    if(state.hasIn(['user','id'])){
        // 用户已经登录
    }else{
        // 用户未登录
    }

Para determinar si dos datos son iguales: is(imA,imB) en JS, si datos u objeto, ==o ===solo dos variables para determinar si la dirección es una referencia al mismo objeto, el objeto es difícil de juzgar si dos claves son iguales y JS diferente, inmutable compara la hashCodesuma de dos objetosvalueOf
Fusión de datos: merge()/mergeDeep() otra operación de uso común es la fusión de datos. En JS, generalmente lo usamos Object.assign()para lograr, pero Object.assign () solo puede realizar una fusión superficial. Para datos más profundos, puede usar inmutable mergeDeep()para lograr. Dos Ambos métodos devuelven los datos combinados.

    const imA = Map({
        username:'马云',
        money:150000000000,
        info:{
            married:true,
            witticism:'我没见过钱，我对钱不感兴趣'
        }
    })
    const imB = Map({
        username:'laoxie',
        gender:'男',
        info:{
            married:false,
            age:18,
        }
    })
    const newImData = imA.merge(imB);
    console.log(newImData.toJS());
    //输出 ：
    // {
    //     username:'laoxie',
    //     gender:'男',
    //     money:150000000000,
    //     info:{
    //         married:false,
    //         age:18,
    //     }
    // }

    const newImData = imA.mergeDeep(imB);
    //输出 ：
    // {
    //     username:'laoxie',
    //     gender:'男',
    //     money:150000000000,
    //     info:{
    //         married:false,
    //         age:18,
    //         witticism:'我没见过钱，我对钱不感兴趣'
    //     }
    // }

Por supuesto, hay muchos métodos inmutables. Este texto solo implica una operación básica. Si desea conocer más tipos de datos, consulte el sitio web oficial.