Javascript React的工作流程是什么

下面的代码来自

React

，它动态更新DOM。我使用了FacebookReact的教程，但不了解整个代码，即代码的哪一部分在何时以及如何触发代码中的其余部分时执行。请帮助我理解代码

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

var TodoList=React.createClass({
render:function（）{
var createItem=函数（itemText）{
返回
{itemText}
；
};
返回
{this.props.items.map（createItem）}
；
}
});
var TodoApp=React.createClass({
getInitialState:函数（）{
返回{items:[]，文本：'}；
},
onChange：函数（e）{
this.setState（{text:e.target.value}）；
},
handleSubmit:函数（e）{
e、 预防默认值（）；
var nextItems=this.state.items.concat（[this.state.text]）；
var nextText=''；
this.setState（{items:nextItems，text:nextText}）；
},
render:function（）{
返回(
待办事项
{'Add#'+（this.state.items.length+1）}
);
}
});
React.renderComponent（，mountNode）；

---

上面的代码用于动态更新DOM结构。此代码参考自，请帮助了解代码的工作流程

谢谢，这是一个很好的问题。下面是对幕后发生的事情的大致概述：

初始化 这一切都是从这一行开始的：

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

然后，它呈现TodoApp组件

TodoApp::render()

这反过来又实例化了TodoList

TodoList::render()

此时，我们已经具备了呈现初始标记所需的一切

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

将被调用，这将调用

TodoApp::setState

反过来，我会打电话给你

TodoApp::render

再次创建并生成更新的DOM

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

待办事项

加上#1

此时发生的事情是React将在前一个DOM和当前DOM之间进行区分

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

您可以在上找到更一般的解释。
通常，react生命周期可以通过以下阶段来描述（组件创建后可以重复多次）：

初始化值（仅一次）：
如果需要在初始渲染后添加某些内容（仅一次），请进行装载：
重新呈现函数、变量和组件
更新：
卸载：
渲染发生在这里
<div>
  <h3>TODO</h3>
  <ul></ul> <!-- <TodoList> -->
  <form>
    <input value="sometext" />
    <button>Add #1</button>
  </form>
</div>

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

    constructor(){ ... }

    componentDidMount(){...}

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

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

    componentWillUnmount(){...}

    render(){...}