Detailed instructions for getting immutable.js

What is Immutable Data

Immutable Data refers to data that cannot be changed once it is created.

By using Immutable Data, we can easily deal with caching, fallback, data change detection and other issues, and simplify our development.

Immutable Data in js

In JavaScript, we can simulate Immutable Data through deep clone, which means that every time we operate on the data, we will use deep clones the data to create a new data.

deep clone

 /** * learning-immutable - clone-deep.js * Created by mds on 15/6/6. */'use strict'; var cloneDeep = require('lodash.clonedeep');var data = { id: 'data', author: { name: 'mdemo', github: 'https://github.com/demohi' }};var data1 = cloneDeep(data);console.log('equal:', data1===data); //falsedata1.id = 'data1'; data1.author.name = 'demohi';console.log(data.id);// data console.log(data1.id);// data1console.log(data.author.name);//mdemo console.log(data1.author.name);//demohi

Of course you may realize that this is very slow. As shown below, it is indeed very slow

The protagonist immutable.js appears

immutable.js is a project open sourced by Facebook. It is mainly to solve the problem of javascript Immutable Data. It provides a more efficient way by referring to hash maps tries and vector tries.

Simply put, immutable.js solves performance problems through structural sharing. Let's first watch a video to see how immutable.js is done

When a set operation occurs, immutable.js will only clone the parts above its parent level, and the others will remain unchanged, so that everyone can share the same parts, which can greatly improve performance.

Why do you want to use Immutable Data in React.js

Anyone who is familiar with React.js should know that React.js is a framework with UI = f(states). In order to solve the update problem, React.js uses virtual dom. Virtual dom uses diff to modify the dom to achieve efficient dom updates.

It sounds perfect, but there is one problem. When state is updated, if the data does not change, you will also do virtual dom diff, which will cause waste. This situation is actually very common, please refer to the article flummox

Of course you may say that you can use PureRenderMixin to solve it. PureRenderMixin is a good thing, we can use it to solve some of the above problems, but if you pay attention, you can see the following prompt in the document.

The code copy is as follows:

This only shallowly compares the objects. If these contain complex data structures, it may produce false-negatives for deeper differences. Only mix into components which have simple props and state, or use forceUpdate() when you know deep data structures have changed. Or, consider using immutable objects to facilitate fast comparisons of nested data.

PureRenderMixin is just a simple shallow comparison and is not used for multi-layer comparisons. What should I do? ? If you do complex comparisons yourself, the performance will be very poor.

The solution is to use immutable.js to solve this problem. Because as long as there is data change in each state update, PureRenderMixin can immediately determine the data change, which can greatly improve performance. This part can also be found in the official document Immutability Helpers

Summary: Use PureRenderMixin + immutable.js

refer to

React.js Conf 2015 - Immutable Data and React

Immutability Helpers

PureRenderMixin

immutable-js