Immutable. js details, immutable. js

Immutable. js details, immutable. js

What is Immutable Data?

Immutable Data is Data that cannot be changed once created.

By using Immutable Data, we can easily handle cache, rollback, Data change detection, and other issues to simplify our development.

Immutable Data in js
In javascript, we can simulate Immutable Data through deep clone, that is, each time we operate on the Data, the new deep clone of the Data generates 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. For example, it is really slow

Lead immutable. js debut

Immutable. js is an open-source project by facebook. It aims to solve the javascript Immutable Data problem and provides a more effective method by referring to hash maps tries and vector tries.

In short, immutable. js solves performance problems through structural sharing. Let's watch a video to see how immutable. js works.

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

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

Familiar with React. javascript should all know, React. js is a framework of UI = f (states). To solve the update problem, React. js uses virtual dom, and virtual dom modifies dom through diff to achieve efficient dom update.

It sounds perfect, but there is a problem. When the state is updated, if the data does not change, you will also perform virtual dom diff, which leads to a waste. This situation is very common. You can refer to the flummox article.

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 to it, you can see the following prompt in the document.

Copy codeThe Code 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 a simple and lightweight comparison. It is not used for multi-layer comparison. What should we do ?? If you perform complex operations on your own, the performance will be very poor.

The solution is to use immutable. js to solve this problem. As long as there is a data change in each state update, PureRenderMixin can immediately determine the data change, which can greatly improve the performance. For more information, see Immutability Helpers.

Summary: Use PureRenderMixin + immutable. js

Reference

React. js Conf 2015-Immutable Data and React

Immutability Helpers

PureRenderMixin

Immutable-js