Detaillierte Schritte zum Implementieren von TodoList mit React

Was ich Ihnen dieses Mal präsentiere, sind die detaillierten Schritte zur Implementierung von TodoList mit React. Dieser Artikel gibt Ihnen eine detaillierte Analyse.

Lassen Sie uns zunächst über die zu implementierenden Funktionen sprechen

(1) Aufgaben können hinzugefügt werden;
(2) Die Farben erledigter und nicht erledigter Aufgaben werden unterschieden; 3) Beim Hinzufügen von Aufgaben, Ändern des Aufgabenstatus und Löschen von Aufgaben ändern sich die folgende Anzahl abgeschlossener Aufgaben und die Gesamtzahl der Aufgaben.

Die oben genannten Funktionen sind zu implementieren.

2. Wie entwerfe ich als nächstes?

(1) Datenstruktur der Aufgabenspeicherung:

list: [{
      id: 0,
      name: '吃饭',
      status: 0
    }, {
      id: 1,
      name: '睡觉',
      status: 0
    }, {
      id: 2,
      name: '打豆豆',
      status : 0
    }]

Jede Aufgabe hat ihre eigene ID, ihren eigenen Aufgabennamen, ihren eigenen Aufgabenstatus und ihre eigene Aufgaben-ID. Außerdem ist sie eindeutig Zur Identifizierung der Aufgabe kann er auch als Schlüsselwert des Listenelements verwendet werden. Wir alle wissen, dass bei der Verwendung von Listen in React jedes Element in der Liste einen Schlüsselwert haben muss. Dies ermöglicht das schnelle Auffinden jedes Listenelements und reduziert unnötige Abfragen beim Ausführen des Diff-Algorithmus, wodurch die Leistung verbessert wird.

(2) Aufteilung der Komponenten

TodoList als Ganzes als große Komponente

Jedes Listenelement (ListItem) in der Liste als Komponente

Fügen Sie die Aufgabenbox (Dialog) als Komponente hinzu.

3. Spezifische Implementierung

Nehmen Sie die Implementierung von ListItem als Beispiel:

Es ist notwendig, das Listenelement separat in eine Komponente zu unterteilen, damit jedes einzelne Element sie enthält sind alle unabhängig, was die Logik des Codes vereinfacht, die Wiederverwendbarkeit des Codes verbessert und die Wartung erleichtert.

Wenn Sie schlau sind, werden Sie natürlich auf jeden Fall an ein Problem denken: Jedes Mal, wenn sich der Status einer Aufgabe ändert oder eine Aufgabe hinzugefügt oder gelöscht wird, werden die Anzahl der abgeschlossenen Aufgaben und die Gesamtzahl angezeigt wird sich ändern, aber jedes ListItem Wie erreicht man gegenseitige Unabhängigkeit? Zu diesem Zeitpunkt wird die Kommunikation zwischen übergeordneten und untergeordneten Komponenten verwendet.

Wenn Sie wie ich ein React-Anfänger sind, wird es auf Baidu viele Artikel darüber geben, wie man zwischen übergeordneten und untergeordneten Komponenten kommuniziert. Lassen Sie mich kurz auf mein einfaches und grobes Verständnis eingehen:

In Definieren Sie die Methode zum Ändern von Statusdaten in der übergeordneten und untergeordneten Komponente, übergeben Sie die Methode in Form von Requisiten an die untergeordnete Komponente, lösen Sie das Programm

Ereignisverarbeitung in der untergeordneten Komponente aus und führen Sie dann die übergebene Funktion aus die übergeordnete Komponente, wenn bestimmte Bedingungen erfüllt sind.

Der spezifische Code lautet wie folgt:

Code in der übergeordneten Komponente:

import React, { Component } from 'react';
import ListItem from './listItem';
import Dialog from './dialog';
import './main.css';
  
class TodoList extends Component {
  constructor (props) {
    super(props);
      
    //初始任务列表
    this.state = {
      list: [{
        id: 0,
        name: '吃饭',
        status: 0
      }, {
        id: 1,
        name: '睡觉',
        status: 0
      }, {
        id: 2,
        name: '打豆豆',
        status : 0
      }],
      finished: 0
    };
  }
    
  //添加新任务，在组件中以props的形式传递给子组件
  addTask (newitem) {
    var allTask = this.state.list;
    allTask.push(newitem);
    this.setState({
      list: allTask
    });
  }
  //更新完成的任务，在组件中以props的形式传递给子组件
  updateFinished (todoItem) {
    var sum = 0;
    this.state.list.forEach( (item) => {
      if (item.id === todoItem.id) {
        item.status = todoItem.status;
      }
      if (item.status === 1) {
        sum++;
      }
    });
    this.setState({
      finished: sum
    });
  }
  
  //更新任务总数，在组件中以props的形式传递给子组件
  updateTotal (todoItem) {
    var obj = [], sum = 0;
    this.state.list.forEach((item) => {
      if (item.id !== todoItem.id) {
        obj.push(item);
        if (item.status === 1 ) {
          sum++;
        }
      }
    });
    this.setState({
      list: obj,
      finished: sum
    });
  }
  
  render () {
    return (
      <div className="container">
        <h1>TodoList</h1>
        <ul>
          { this.state.list.map ((item, index) =>
            <ListItem 
              item={item} 
              finishedChange={this.updateFinished.bind(this)} 
              totalChange={this.updateTotal.bind(this)}
              key={index}
            />
          )}
          <li>{this.state.finished}已完成 / {this.state.list.length}总数</li>
        </ul>
        <Dialog addNewTask={this.addTask.bind(this)} nums={this.state.list.length}/>
      </div>
    );
  }
}
  
export default TodoList;

Code in der untergeordneten Komponente:

import React, { Component } from 'react';
  
class ListItem extends Component {
  constructor (props) {
    super(props);
  
    this.handleFinished = this.handleFinished.bind(this);
    this.handleDelete = this.handleDelete.bind(this);
  } 
  
  handleFinished () {
    var status = this.props.item.status;
  
    status = (status === 0 ? 1 : 0);
  
    var obj = {
      id: this.props.item.id,
      name: this.props.item.name,
      status: status
    }
      
    this.props.finishedChange(obj); //执行父组件传来的方法
  }
  
  handleDelete () {
    this.props.totalChange(this.props.item); //执行父组件传来的方法
  }
  
  render () {
    const item = this.props.item;
  
    const unfinish = {
      backgroundColor: '#DFFCB5',
      color: '#2EB872',
    };
  
    const finish = {
      backgroundColor: '#FFFA9D',
      color: '#FF9A3C',
      textDecoration: 'line-through'
    }
  
    var itemStyle = item.status === 0 ? unfinish : finish;
      
    return (
      <li key={item.id} style={itemStyle}>
        <span 
          onClick={this.handleFinished} 
          id={item.id}
          className="check-btn"
          style={{backgroundColor: item.status === 0 ? &#39;#fff&#39; : &#39;#A1EAFB&#39;}}
        ></span>
        <span>{ item.name }</span>
        <span onClick={this.handleDelete} className="delete-btn">删除</span>
      </li>
    );
  }
}
  
export default ListItem;

Oben ist dies eine Zusammenfassung dieser kleinen Übung. Wenn Sie wie ich ein React-Neuling sind, werden Sie React nach dem Schreiben wahrscheinlich besser verstehen.

I Glauben Sie, dass Sie die Methode beherrschen, nachdem Sie die obige Einführung gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So verwenden Sie Vue, um die Anmeldeüberprüfung zu implementieren

So verwenden Sie die benutzerdefinierten Anweisungen von Vue, um a Dropdown-Menü

Verwenden Sie jQuery zum Deduplizieren und Sortieren von Arrays

Das obige ist der detaillierte Inhalt vonDetaillierte Schritte zum Implementieren von TodoList mit React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!