Как работает метод render() в React?

Question

[Pantene742]

Насколько я знаю, в JS передача параметра такого типа не поддерживается. return возращает в скобках html код и не в кавичках, и не в ` ` как строку.
React компилятор перед сборкой парсит данные в файлах компонентов(а именно те что возращает функция render) и переводит их в рабочую форму для ES6 , или же это нормально для ES6. (Я понимаю что реакт собирает все в ES2015 )

render() {
    return (
      <Row className="show-grid">
        <Col md={6}>
          <h2>Est. total</h2>
        </Col>
        <Col md={6}>
          <h2>{`$${this.props.price}`}</h2>
        </Col>
      </Row>
    );
  }

Answer 1

[Антон Спирин]

return возращает в скобках html код

return не возвращает html код. JSX это лишь синтаксический сахар над JavaScript.

JSX вида:

render() {
  return (
    <h1 className="greeting">
      Hello, world!
    </h1>
  );
}

транслируется в JS вида:

render() {
  return React.createElement(
    'h1',
    { className: 'greeting' },
    'Hello, world!'
  );
}

результат выполнения render в этом случае будет следующий:

{
  $$typeof: Symbol(react.element),
  key: null,
  props: { className: "greeting", children: "Hello, world!" },
  ref: null,
  type: "h1",
  _owner: null,
  _store: { validated: false },
  _self: null,
  _source: null,
  __proto__: Object,
}

Возвращаемый объект это Virtual DOM Node. По ней библиотека создает элемент в реальном DOM.

React компилятор перед сборкой парсит данные в файлах компонентов...
...Я понимаю что реакт собирает все в ES2015...

React ничего не собирает. Никаких компиляторов библиотека не имеет. Процесс преобразования JSX в JS называется не компиляцией, а транспиляцией. Транспиляцию JSX в JS выполняют с помощью babel/TypeScript, а сборку обычно осуществляют с помощью библиотеки webpack.

или же это нормально для ES6

Нет. JSX не входит в спецификацию ECMAScript 2015

Comments

[Pantene742]

Спасибо))

[Vann Damm]

Вот это нужно указывать в доках по реакту в самом начале. А то наинкапсулируют себе, а ты страдай

[Pantene742]

Vann Damm, Да это я уже понял что это компиляция JSX в JS. В Angular это в браузере происходит если AOT не активен. Прикиньте Angular в браузере string превращает в JS код.