什么是React的工作流程

Question

下面的代码来自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/,因此请帮助您了解代码的工作过程.

Answer 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>

它被字符串化并通过innerHTML添加到mountNode中

的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和当前DOM之间做差异.

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

只有输入的值发生了变化,因此React将只更新真实DOM中的这个特定属性.