PureRenderMixin

var PureRenderMixin = require('react/addons').addons.PureRenderMixin;
React.createClass({
  mixins: [PureRenderMixin],

  render: function() {
    return <div className={this.props.className}>foo</div>;
  }
});

Типы данных

Простые

Ссылочние

• Number
• String
• Boolean
• null
• undefined

• Object
• Function
• Array

Ссылочный тип

var a = {
    val: 1
};

var b = a;
b.val = 2;

console.log(a.val) // #2

Сравнение

var a = [1,2,3],
    b = [1,2,3];

console.log(a == b) // #false;

//Поверхностное сравнение
function equal(a,b) {
    var key;
    for (key in a) {
        if (a[key] != b[key]) return false;
    };
    for (key in b) {
        if (a[key] != b[key]) return false;
    };
    return true;
} 

//todo Глубокое сравнение

Иммутабельные данные

Object.prototype.set = function (key, val) {
    return this[key] === val ? this : assign({}, this, {key: val})
};

var a = {val: 1};
var b = a.set('val', 2);

console.log(a.val) // #
console.log(b.val) // #

console.log(a == b) // # false
console.log(a == a.set('val', 1)) // # true

Чистые функции

function pureSum(a,b) {
    return a + b;
}

var c;

function sideEffectSum(a,b) {
    c = a + b;
}

function unpureSum(a) {
    return a + Math.random() * 100
}

function anotherUnpureSum(a) {
    return a + c
}

Immutable.js

var Immutable = require('immutable');
var map1 = Immutable.Map({val:1});
var map2 = map1.set('val', 2);
map1.get('val'); // 1
map2.get('val'); // 2

https://facebook.github.io/immutable-js/

Иммутабельные классы

function Todo(text, priority, id) {
    this.text = text;
    this.priority = priority;
    this.id = id ? id : generateId()
}

Todo.prototype.setText = function(text) {
    return text == this.text ? this : new Todo(text, this.priority, this.id)
}