Что такое рабочий процесс Реагента

Ниже приведен код React, который динамически обновляет DOM. Я использовал учебник от Facebook, но не понял весь код, т.е. Какая часть кода выполняется, когда и как он запускает остальные части кода. Пожалуйста, помогите мне в понимании кода.

var TodoList = React.createClass({
  render: function() {
    var createItem = function(itemText) {
      return <li>{itemText}</li>;
    };
    return <ul>{this.props.items.map(createItem)}</ul>;
  }
});

var TodoApp = React.createClass({
  getInitialState: function() {
   return {items: [], text: ''};
  },

  onChange: function(e) {
    this.setState({text: e.target.value});
  },

  handleSubmit: function(e) {
    e.preventDefault();
    var nextItems = this.state.items.concat([this.state.text]);
    var nextText = '';
    this.setState({items: nextItems, text: nextText});
  },

  render: function() {
    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <input onChange={this.onChange} value={this.state.text} />
          <button>{'Add #' + (this.state.items.length + 1)}</button>
        </form>
      </div>
    );
   }
});
React.renderComponent(<TodoApp />, mountNode);

Приведенный выше код используется для динамического обновления структуры DOM. Этот код относится к http://facebook.github.io/react/, поэтому, пожалуйста, помогите узнать процесс работы кода.

Ответы

Ответ 1

Спасибо, это очень хороший вопрос. Вот приблизительный обзор того, что происходит за кулисами:

Инициализация

Все начинается с этой строки:

React.renderComponent(<TodoApp />, mountNode);

Этот экземпляр компонента TodoApp, который вызывает:

TodoApp::getInitialState()

то он отображает компонент TodoApp

TodoApp::render()

который в свою очередь создает экземпляр TodoList

TodoList::render()

В этот момент у нас есть все необходимое для рендеринга начальной разметки

<div>
  <h3>TODO</h3>
  <ul></ul> <!-- <TodoList> -->
  <form>
    <input value="" />
    <button>Add #1</button>
  </form>
</div>

Строка и добавление внутри mountNode через innerHTML

OnChange

Затем скажем, вы собираетесь ввести какой-то текст на вкладке, затем

TodoApp::onChange

будет вызываться, который будет называться

TodoApp::setState

и, в свою очередь, вызовет

TodoApp::render

и сгенерировать обновленный DOM

<div>
  <h3>TODO</h3>
  <ul></ul> <!-- <TodoList> -->
  <form>
    <input value="sometext" />
    <button>Add #1</button>
  </form>
</div>

Что происходит на этом этапе, так это то, что React собирается выполнить разницу между предыдущим DOM и текущим.

    <div>
      <input
-       value=""
+       value="sometext"

Изменено только значение ввода, поэтому React собирается просто обновить этот конкретный атрибут в реальном DOM.

Ответ 2

Вы можете найти более общее объяснение на официальной странице React. Обычно жизненный цикл реакции может быть описан следующими этапами (которые могут повторяться несколько раз после создания компонентов):

Монтаж (только один раз):

    constructor(){ ... }
    componentDidMount(){...}

Рендеринг функций, переменных и компонентов

    myArrowFunction = () => {
      ...
      this.setState({...})
      ...  
    }

Обновление:

    componentDidUpdate()}{...}
    shouldComponentUpdate(){...}

размонтирование:

    componentWillUnmount(){...}

Рендеринг происходит здесь

    render(){...}