Immutable JS has always been used in this project. When I first used Immutable JS, MY heart was against it. Is it necessary to make simple object manipulation so complicated? With the development of projects that manipulate data frequently, Immutable was discovered. Here is a summary of some experiences about using Immutable;

One: What isImmutable Data

Immutable Data is Data that, once created, cannot be changed. Any modification or addition or deletion of an Immutable object returns a new Immutable object. Immutable is Persistent Data >Structure, which means that when creating new Data from old Data, the old Data must be available and unchanged at the same time. Immutable also uses Structural Sharing to avoid the performance cost of deepCopy copying all nodes once. If a node in the object tree changes, Immutable modifies only that node and its affected parent, and shares the other nodes.

Immutable JS supports Map, List, Set, Collection, OrderedMap, Stack, OrderedSet, Record, Range, Repeat nine data structures.

The most important and frequently used are the first three;

Map: a set of key-value pairs corresponding to Object. ES6 also has a dedicated Map Object

List: An ordered repeatable List, corresponding to an Array

Set: Unordered and non-repeatable list

Two: WhyImmutable.ImmutableWhat are the benefits?

First, when manipulating store data without using Immutable data, it is usually possible to make a copy of the data without modifying it. However, deep-copy recursively copies the entire object each time. If you encounter very complex object data, this performance will be poor.

When a set operation is performed, Immutable modify. js modifys only that node and its affected parent, while the other nodes are shared to improve performance. Here’s a GIF you can find online:

In the react shouldComponentUpdate method, check whether the component needs to be updated. For complex object data, it can be cumbersome to compare the value of two objects. Immutable provides the is method to determine whether two Immutable objects are equal.

Third, Immutable provides a rich API that makes it intuitive and convenient to manipulate complex data structures.

Peruse the source code to explore how Immutable data structures can be used to design Map objects:

let obj1 = Immutable.Map({
  aa: {
    'a':1
  },
  bb: {
    'b': 2}}); console.log(obj1)Copy the code

The a Immutable object above is printed as follows:

As you can see, when a Map object is converted to Immutable at multiple levels, only the first level is converted to Immutable.

To convert each layer to Immutable, use fromJS:

let obj2 = Immutable.fromJS({
  aa: {
    'a':1
  },
  bb: {
    'b': 2}}); console.log(obj2);Copy the code

Screenshot below:

Immutable, when dealing with Map objects, places the value of ordinary objects to be converted into Map objects under the entries object of _root. Each child of this ordinary object would be an array, and each child’s key would be the 0th item in the array, and each child’s value would be the first item in the array; The advantage of this storage is that when you set or fetch objects using the set or GET methods, you iterate through entries objects to set or find the corresponding value.

The most frequently used Immutable methods are the setIn and getIn methods; The first argument to both the setIn and getIn methods is the hierarchical path to be queried in the form of an array.

SetIn takes a second parameter, which is the value to be set;

Take setIn as an example.

obj2.setIn(['aa'.'a'], 2),  
Copy the code

Immutable iterates from the topmost entries object; Look for the outermost entry object, call it Entries0, to see if the 0th entry of entries0 is “AA”; If the 0th entry of Entries0 is not “AA”, a new entry is added to entrie0;

Such as:

obj2.setIn(['cc'.'c'], 3);
Copy the code

Entries0’s 0th item is not ‘cc’, so entries0 adds a ‘cc’ object;

entries0
entries0
entries
entries1
entrie1
Give entries1

Now let’s look at the getIn operation

If the first argument to getIn provides a hierarchical path that is not found in Immutable, what is returned?

Such as:

let obj3 = obj2.getIn(['dd'.'d']);
console.log(obj3)   // undefined
Copy the code

Returns undefined, which makes sense because the desired key cannot be found in the path corresponding to the first argument.

What if there’s a second argument? What happens?

let obj3 = obj2.getIn(['dd'.'d'], 5);
console.log(obj3)   // 5
Copy the code

Returns 5; It turns out that when getIn is used, if the first parameter is invalid, the result returns the second parameter directly. (getIn method to pass the second parameter is meaningless);

When using Immutable at first, it takes some time to learn a new API and review some documentation; Get (‘a’), obJ.get ([‘a’, ‘b’, ‘c’]), etc., but Immutable is a surprising way to actually use it.