Как и где рендерятся элементы? когда создаються обьекты?

Question

[Андрей]

Что происходит после метода render? просто все элементы из ментора render переходят как обьекты в virtualDOM и сравниваються с DOM? раскажите поподробнее.

import React, { Component, PropTypes } from 'react';
import Section from './section';

class Content extends Component {
  constructor() {
    super();
    console.log(this);
  }

  makeSomeArrow = () => {
    console.log('arrow');
  }

  maskeSomeShort() {
    console.log('short');
  }

  render() {
    return (
      <Section/>
    );
  }
}

Content.propTypes = {
  movies: ImmutablePropTypes.list,<code lang="javascript">

</code>
  boundGetContent: PropTypes.func,
  token: PropTypes.string
};

export default Content

import React, { Component } from 'react';

class Section extends Component {
  render() {
    return (
      <div>
        Content
      </div>
    );
  }
}

export default Section;

Answer 1

[Евгений]

Ну там ведь все транспилится в React.createElement(Section, { ...props }), и уже внутри VirtualDom'a он проходит по всем этим элементам и создает их инстансы. Где Section - ваш класс

Comments

[Андрей]

Евгений когда я в ReactDOM.render() отправляю единственный компонент и root, тогда в этого компонента вызываеться метод render который добавляет React элементы в virtualDom, и DOM сравнивает себя с ним, и если что то отличается тогда DOM заменяеться на virtual?

[Евгений]

Андрей: Ну если коротко, то да, как-то так. Только он заменяет не весь DOM а лишь его diff, т.е. разницу. P.S. VirtualDOM сравнивает с DOM а не наоборот, т.к. DOM вообще ничего не знает про VDOM.

[Андрей]

Евгений: ты точно начинающий веб разработчик)?

[Евгений]

Андрей: Да, а в чем проблема?

[Андрей]

Евгений: все хорошо), спасибо за помощь, у тебя уровень повыше начинающего!