Что делает каждая часть этих компонентов React, как состояние и реквизит приходит и уходит?

Question

Я пытаюсь понять, как идут и уходят props и state. Я комментирую фрагменты кода, которые я понимаю, но есть некоторые другие, которые я не могу, потому что я не понял, что происходит.

This is the code

Или здесь вы можете увидеть код, а также:

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

Как вы объяснить, что это onChange функция делает на TodoItems компонента.

Или как объяснить куски кода, как это:

<TodoItems items={this.state.todos}/> 
<TodoInput addTodo={this.addTodo}/> 

почему this.state.todos установка props там и почему имя addTodo={} там с this.addTodo?

Answer 1

Реквизиты поставляются компонентом родительским компонентом путем добавления атрибутов к JSX (TodoItems> items и TodoItems> addTodo, например). Реквизитами могут быть данные (простые типы, массивы и т. Д.), Но также ссылки на методы обратного вызова в родительском компоненте. Эти обратные вызовы могут использоваться для передачи данных от компонента к его родительскому элементу. Внутри компонента вы должны думать, что op-реквизиты являются объектами, которые не подлежат уничтожению. Поэтому вы не должны изменять значение свойства.

В вашем примере список данных todo (data) передается из состояния одного компонента в свойство базового компонента (TodoItems). У TodoInput есть свойство addTodo, которое может использоваться для предоставления функции (обратного вызова) компоненту «TodoInput», который должен вызываться, когда пользователь вводит todo. Когда вы предоставляете обратный вызов через свойства для компонента, вы никогда не будете предоставлять параметры («this.addTodo» и «this.addTodo» («Сделать это») »), потому что вам нужен только указатель на обратный вызов, а не возвращаемое значение функции.

В вашем примере компонент «TodoList» отвечает за ведение списка todo. Вот почему список хранится в состоянии этого компонента. Каждое изменение состояния (вызванное с помощью метода setState) приводит к повторной обработке компонента «TodoList». Поскольку компонент «TodoList» отвечает за список, компонент «TodoInput» должен поставлять новые элементы в компонент «TodoList». Это делается с помощью обратного вызова addTodo, вызываемого из компонента «TodoInput», когда пользователь добавляет новую информацию.

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