React+immutable.js's Spiritual Journey

During this time, the project development was developed using REACT+REDUX+IMMUTABLEJS+ES6, which summarizes the relative use posture of immutable.js:

Immutable data, as its name implies, is the information that cannot be changed once it has been created. By using immutable data, we can make it easier to deal with issues such as caching, fallback, data change detection, etc., to simplify our development.

we know that React.js is famous for its approach to DOM, which uses virtual Dom to see diff and then changes the DOM that needs to be changed. But there's a problem. When the state is updated, if the data does not change, react will also do the virtual Dom diff, which creates a waste, in fact, this is actually very common.

Of course react do performance optimizations there is a way to avoid repeated rendering, that is, the use of life cycle shouldcomponentupdate (), but it returns true by default, the render () method is always executed, and then do the Virtual Dom comparison, and whether you need to do real Dom updates.

This time there is a solution to this problem, with Purerendermixin, seemingly can also solve the problem, in some cases performance acceleration.

Import purerendermixin from ' React-addons-pure-render-mixin '; class Foocomponent extends React.component {    Constructor (props) {        super (props);        This.shouldcomponentupdate =purerendermixin.shouldcomponentupdate.bind (this);} Render () {    return <div classname={this.props.classname}>foo</div>;    }}

　　

In fact, it implements the Shouldcomponentupdate, which compares the current and next props and state, and returns False when equal, without rendering

Look at the Purerendermixin official document, this is only shallowly compares the objects,only mix to components which has simple props and state 。

Purerendermixin, it is simply a shallow comparison, not suitable for complex comparisons.

Along the way, we can judge in Shouldcomponentupdate (), if there is props/state change, then render (), this time the problem comes, how do you compare, shallowly compare , not reach the effect, deep compare performance is very poor

This time immutable.js come, use immutable.js can solve this problem.

The first copy of the immutable.js is that when a node in the object tree changes, only the node and the parent node affected by it are modified, and the other nodes are shared.

Import immutable from ' immutable '; const Initialstate = Immutable.fromjs ({data:null});

　　

Of course you can do this with deep-copy, but the difference is in performance. Each time deep-copy the entire object to be copied recursively. The implementation of immutable, like a linked list, adds a new node that transfers the parent-child relationship of the old node to the new node.

After the immutable object is generated and then judged in the life cycle shouldcomponentupdate

Shouldcomponentupdate (nextprops) {    return!this.props.situation.equals (nextprops.situation);}

The render () process is performed only when the current and next props immutable objects are compared and when equal returns False, without rendering, only true.

React+immutable This can greatly improve the performance of react.

React+immutable.js's Mental journey