javascript - helmet - ¿Qué es el flujo de trabajo del React?

react helmet ssr

Question

El siguiente código es de React , que actualiza el DOM dinámicamente. Utilicé el tutorial de Facebook, pero no entendí todo el código, es decir, qué parte del código se ejecuta cuándo y cómo activa el resto de las partes del código. Por favor, ayúdame a entender el código.

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);

El código anterior se utiliza para actualizar dinámicamente la estructura DOM. Este código se remite desde http://facebook.github.io/react/ así que por favor ayude a conocer el proceso de trabajo del código.

Answer 1

Gracias, esa es una muy buena pregunta. Aquí hay una visión general de lo que está sucediendo detrás de las escenas:

Inicialización

Todo comienza con esta línea:

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

Esto instancia el componente TodoApp que llama:

TodoApp::getInitialState()

A continuación, representa el componente TodoApp.

TodoApp::render()

que a su vez crea una instancia de TodoList

TodoList::render()

En este punto, tenemos todo lo que necesitamos para hacer el marcado inicial

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

Se forma y se agrega dentro de mountNode a través de innerHTML

En cambio

Entonces digamos que vas a ingresar algún texto en la entrada, luego

TodoApp::onChange

va a ser llamado, que va a ser llamado

TodoApp::setState

y a su vez llamará

TodoApp::render

de nuevo y generar el DOM actualizado

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

Lo que está sucediendo en este punto es que React va a hacer una diferencia entre el DOM anterior y el actual.

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

Solo cambió el valor de la entrada, por lo que React solo actualizará este atributo particular en el DOM real.