Javascript 反应组件的每个部分都在做什么，状态和道具是如何来的和去的？

我试图理解

道具和
状态是如何来来去去的。我正在评论我理解的代码片段，但是还有一些我不能评论的代码片段，因为我没有理解正在发生的事情


或者您也可以在这里看到代码：

      class TodoList extends React.Component {
        // THIS IS THE PARENT COMPONENT

        // WE DECLARE THE TYPE OF PROPS
        static propTypes = {
          todos: React.PropTypes.array
        }
        // INITIAL STATE OF THE COMPONENT
        constructor(props) {
          super(props)
          this.state = { todos: this.props.todos || [] }
        }

        addTodo = (item) => {
          // WE START MODIFYING THE STATE OF THE COMPONENT
          this.setState({todos: this.state.todos.concat([item])});
        }

        render () {
          return (
            <div className="panel panel-default TodoList">
              <h3>TODO List</h3>
              <TodoItems items={this.state.todos}/>
              <TodoInput addTodo={this.addTodo}/>
            </div>
          );    
        }
      };

      class TodoItems extends React.Component {

        static propTypes = {
          items: React.PropTypes.array.isRequired
        }

        constructor(props) {
          super(props);
        }

        render () {
        let createItem;

          createItem = (item, index) => {
            return (
              <li key={index} className="list-group-item">{item}</li>
            );
          };
        return (
            <ul className="TodoItems list-group">
              {this.props.items.map(createItem)}
            </ul>
          );
        }
      };

      class TodoInput extends React.Component {

        constructor (props) {
           super(props);
           this.state = {item: ''};
        }

        onChange = (e) => {
          this.setState({item: e.target.value});
        }

        handleSubmit = (e) => {
          e.preventDefault();
          this.props.addTodo(this.state.item);
          this.setState({item: ''});
        }

        render () {
          return (
            <form onSubmit={this.handleSubmit} className="TodoInput">
              <div className="input-group">

                <input type="text"
                       className="form-control"
                       placeholder="Search for..."
                       onChange={this.onChange} value={this.state.item}/>

                <span className="input-group-btn">
                  <input className="btn btn-default"
                         type="submit" value="Add" />
                </span>

              </div>
            </form>
          );
        }
      };


      React.render(<TodoList todos={['red','blue']}/>, document.getElementById('container'));

为什么
this.state.todo
在那里设置
props
，为什么名称
addTodo={}
在那里与
this.addTodo
？
通过向JSX添加属性（例如TodoItems>和TodoItems>addTodo），父组件将props传递给组件。道具可以是数据（简单类型、数组等），也可以是父组件中回调方法的引用。这些回调可用于将数据从组件传递到其父组件。在组件中，您应该将op道具视为不可变的对象。因此，不应更改属性的值

在您的示例中，todo（数据）列表正在从一个组件的状态传递到基础（TodoItems）组件的属性。TodoInput有一个“addTodo”属性，可用于向“TodoInput”组件提供函数（回调），当用户输入todo时应调用该组件。当您通过属性向组件提供回调时，您永远不会提供参数（'this.addTodo'vs.'this.addTodo（“Do this”）），因为您只需要指向回调的指针，而不需要函数的返回值

在您的示例中，组件“TodoList”负责维护todo的列表。这就是列表保持此组件状态的原因。状态的每次更改（使用“setState”方法调用）都会导致“TodoList”组件的重新呈现。由于“TodoList”组件负责列表，“TodoInput”组件必须向“TodoList”组件提供新项。这是通过使用“addTodo”回调来完成的，当用户添加新信息时，从“TodoInput”组件调用该回调

还请看一下Flux模式，因为在该模式中，不是组件本身负责数据存储，而是存储。对于较大的应用程序，此模式可以帮助您创建更稳定的React应用程序。
从头开始很有意义这可能是一个更有用的资源。帮了我很大的忙。谢谢：）
<TodoItems items={this.state.todos}/>
<TodoInput addTodo={this.addTodo}/>