Optimize for shouldComponentUpdate

[gaperton]

One of the problems with links is that they break pure render optimization.

An upcoming release of React contains deprecation message for their crappy valueLinks, which actually is the great opportunity to improve links design. We don't have to keep backward compatibility any more.

[gaperton]

There are different design options.

1. Link is the plain function. link() - get value, link( x ) - sets value.

getLink( name ){
    var model = this;
    return function link( x ){
         if( !arguments.length ) return model[ name ];

         model[ name ] = x;
    }
}

It's just one function with two variables closured. Not good, as combinators won't work without polluting the Function.prototype,

[gaperton]

1. Abstract class. It didn't worked with React links internals, now there won't be such a problem.

function Link(){}
Link.prototype = {
    set( x ){ throw new Error( "Not implemented" ); },
    get value(){ throw new Error( "Not implemented" ); }
}

So, in this case every object can implement specific links.

As for the model:

function ModelLink( model, attr ){
    this.model = model;
    this.attr = attr;

    // and... Yes! Pure Render.
    this._changeToken = model._changeToken;
}

ModelLink.prototype = {
    set( x ){ this.model[ this.attr ] = x; },
    get value(){ return this.model[ this.attr ]; }
}

Another option to support pure render for model links is to cache links in the model.

[gaperton]

So, third caching option:

Model.prototype.getLink = function( attr ){
    var links = this._links || ( this._links = new this.Attributes() );
    return links[ attr ] || ( links[ attr ] = new Link( this, attr ) );
}

model._links should be removed on actual model change. This one should be quite efficient.

None of these things will actually help when top-level state is updated. For the links, we need to compare attribute value.

[gaperton]

So, comparing the attribute value. Good thing is that in case of presence of _changeToken, prop reference check is bypassed. Which allows us just to do like this:

ModelLink.prototype = {
    set( x ){ this.model[ this.attr ] = x; },
    get value(){ return this.model[ this.attr ]; },
    get _changeToken(){ return this.value; }
}

Some bugs are possible if model or attr name will be replaced, and value will be the same. This is quite rare case, but weird. I think, we could try to live with that. At least, it's easy to implement.

[gaperton]

Remove any optimization by default. That's bullshit and is too dangerous. And not needed - the full power of links on the lower level is unleashed when we use stateless components as functions, where this optimization is not possible.

Also, in new design, it will be done in Link subclasses. In NestedReact. Which is right thing to do - it knows about both models and pureRender.