about-react.md

Video

• Pete Hunt - Rethinking best practices
• Pete Hunt - The Secrets of React's Virtual DOM (FutureJS 2014)
• Pete Hunt - Be predictable, not correct: functional DOM programming with Pete Hunt using Reactjs

Examples

• Examples from official site
• TodoMVC React, React + Backbone
• TodoMVC React + Flux
• TodoMVC React + RxJS(Reactive JavaScript)
• Bootstrap components on React

Inside

• React’s diff algorithm
• React Demystified

Architecture

• Using React components as Backbone Views
• The Future of JavaScript MVC Frameworks(Introducing Om)

React documentation

Child Reconciliation

Reconciliation - это процесс с помощью которого React обновляет DOM после каждого вызова метода render. По умолчанию потомки(вложенные элементы) сверяются по порядку в котором они были отрисованы. Например, предположим два вызова метода render генерируют такую разметку:

    // Первый вызов метода render
    <Card>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
    </Card>

    // Второй вызов, без `Paragraph 1`
    <Card>
        <p>Paragraph 2</p>
    </Card>

Интуитивно понятно, что <p>Paragraph 1<p> был удален. Но React, после сравнения, заменит текст в первом параграфе, а второй удалит. Потому, что React сравнивает по порядку(order) отрисовки потомков.

Код демонстрирующий такое поведение:

    var paragraphs = ["Paragraph 1", "Paragraph 2"];
    var renderCalled = 1;

    var Card = React.createClass({
        render: function() {
            console.log("Вызов метода render", renderCalled++);
            return React.DOM.div(null, this.props.paragraphs.map(function(paragraph, order){
                console.log("Order:", order);
                return React.DOM.p(null, paragraph);
            }));
        }
    });

    // Первый вызов метода render
    var card = React.renderComponent(new Card({
            paragraphs: paragraphs
    }), document.body);


    // Второй вызов, без `Paragraph 1`
    paragraphs.shift();
    card.setProps({
            paragraphs: paragraph
    })

Вывод в консоли:

    Вызов метода render 1
    order 0 Paragraph 1
    order 1 Paragraph 2

    Вызов метода render 2
    order 0 Paragraph 2