Maison > interface Web > js tutoriel > Étapes détaillées pour implémenter TodoList avec React

Étapes détaillées pour implémenter TodoList avec React

php中世界最好的语言
Libérer: 2017-12-31 10:23:04
original
2846 Les gens l'ont consulté

Ce que je vous apporte cette fois, ce sont les étapes détaillées de la mise en œuvre de TodoList à l'aide de React. Cet article vous donnera une analyse détaillée.

Parlons d'abord des fonctions à implémenter

(1) Des tâches peuvent être ajoutées
(2) Les couleurs des tâches terminées et des tâches inachevées sont distinguées
( 3 ) Lors de l'ajout de tâches, de la modification de l'état des tâches et de la suppression de tâches, le nombre suivant de tâches terminées et le nombre total de tâches changeront

Ce qui précède sont les fonctions à implémenter ;

2. Comment concevoir ensuite ?

(1) Structure des données du stockage des tâches :

list: [{
      id: 0,
      name: '吃饭',
      status: 0
    }, {
      id: 1,
      name: '睡觉',
      status: 0
    }, {
      id: 2,
      name: '打豆豆',
      status : 0
    }]
Copier après la connexion

Chaque tâche a son propre identifiant, son nom de tâche, son statut et son identifiant de tâche. identifiant la tâche, elle peut également être utilisée comme valeur clé de l'élément de liste. Nous savons tous que lors de l'utilisation de listes dans React, chaque élément de la liste doit avoir une valeur clé. Cela permettra de localiser rapidement chaque élément de la liste et de réduire les requêtes inutiles lors de l'exécution de l'algorithme Diff, contribuant ainsi à améliorer les performances.

(2) Division des composants

TodoList dans son ensemble en tant que grand composant

Chaque élément de la liste (ListItem) en tant que composant

< ; 🎜 >Ajoutez la boîte de tâches (Dialogue) en tant que composant.

3. Implémentation spécifique

Prenons l'implémentation de ListItem comme exemple :

Il est nécessaire de diviser l'élément de liste en un composant séparément, de sorte que chaque élément distinct Ils sont tous indépendants, ce qui simplifie la logique du code, améliore la réutilisabilité du code et facilite la maintenance.


Bien sûr, si vous êtes intelligent, vous penserez certainement à un problème : chaque fois que le statut d'une tâche change ou qu'une tâche est ajoutée ou supprimée, le nombre de tâches terminées et le nombre total va changer, mais chaque ListItem est Comment parvenir à une indépendance mutuelle ? À ce stade, la communication entre les composants parent et enfant est utilisée.

Si vous êtes un débutant en React comme moi, il y aura de nombreux articles sur Baidu sur la façon de communiquer entre les composants parent et enfant. Permettez-moi de parler brièvement de ma compréhension simple et grossière :

Dans. Définissez la méthode de modification des données d'état dans le composant parent-enfant, transmettez la méthode au composant enfant sous forme d'accessoires, déclenchez le programme

de traitement d'événement dans le composant enfant, puis exécutez la fonction passée par le composant parent si certaines conditions sont remplies.

Le code spécifique est le suivant :

Code dans le composant parent :

import React, { Component } from &#39;react&#39;;
import ListItem from &#39;./listItem&#39;;
import Dialog from &#39;./dialog&#39;;
import &#39;./main.css&#39;;
  
class TodoList extends Component {
  constructor (props) {
    super(props);
      
    //初始任务列表
    this.state = {
      list: [{
        id: 0,
        name: &#39;吃饭&#39;,
        status: 0
      }, {
        id: 1,
        name: &#39;睡觉&#39;,
        status: 0
      }, {
        id: 2,
        name: &#39;打豆豆&#39;,
        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;
Copier après la connexion
Code dans le composant enfant :

import React, { Component } from &#39;react&#39;;
  
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: &#39;#DFFCB5&#39;,
      color: &#39;#2EB872&#39;,
    };
  
    const finish = {
      backgroundColor: &#39;#FFFA9D&#39;,
      color: &#39;#FF9A3C&#39;,
      textDecoration: &#39;line-through&#39;
    }
  
    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;
Copier après la connexion
Ci-dessus Ceci est un résumé de ce petit exercice. Si vous êtes un débutant en React comme moi, je pense que vous aurez une meilleure compréhension de React après avoir écrit ceci


I. Je crois que vous maîtrisez la méthode après avoir lu l'introduction ci-dessus. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment utiliser vue pour implémenter la vérification de connexion

Comment utiliser les instructions personnalisées de Vue pour compléter un menu déroulant

Utiliser jQuery pour dédupliquer et trier les tableaux


Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal