React を使用して TodoList を実装する詳細な手順

今回は React を使用して TodoList を実装する詳細な手順をお届けします。この記事では詳細な分析を提供します。

まずは実装する機能について説明します

(1) タスクを追加できます
(2) 完了したタスクと未完了のタスクを色で区別します
(3) タスクの追加、タスクのステータスの変更、タスクの削除、完了したタスクの数と以下のタスクの合計数を変更する必要があります

上記は実装する機能です。

2. 次にデザインする方法は?

(1) タスクストレージのデータ構造:

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

各タスクは、タスクの固有性を識別することに加えて、タスク ID をキーとして使用することもできます。リスト項目の値。 React でリストを使用する場合、リスト内の各項目にキー値が必要であることは誰もが知っています。これにより、各リスト項目を迅速に見つけることができ、Diff アルゴリズムの実行時に不要なクエリが削減され、パフォーマンスが向上します。

(2) コンポーネントの分割

TodoList全体を大きなコンポーネントとして、

リスト内の各リスト項目(ListItem)をコンポーネントとして、

タスク追加ボックス(Dialog)をコンポーネントとして。

3. 具体的な実装

ListItem の実装を例に挙げます。

個々の項目が独立し、コードのロジックがより単純になるように、リスト項目を個別にコンポーネントに分割する必要があります。再利用やメンテナンスが容易になります。

もちろん、賢い人であれば、必ず次のような疑問が浮かぶでしょう。各タスクのステータスが変化したり、タスクの追加や削除を行うと、完了したタスクの数や合計数が変化しますが、各 ListItem は独立しています。毛織物をどうやって実現するか？このとき、親コンポーネントと子コンポーネント間の通信が利用されます。

あなたが私のような React 初心者の場合、親コンポーネントと子コンポーネントの間で通信する方法について説明した記事が Baidu にたくさんあります。私の簡単かつ大まかな理解を簡単に話します。

で状態データの変更を定義します。親コンポーネントと子コンポーネントのメソッドを作成し、プロパティの形式で子コンポーネントにメソッドを渡し、子コンポーネントでイベント処理プログラムをトリガーし、特定の条件が満たされた場合に親コンポーネントによって渡された関数を実行します。

具体的なコードは次のとおりです:

親コンポーネントのコード:

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;

子コンポーネントのコード:

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;

上記は、この小さな演習の要約です。もしあなたが私のような反応初心者であれば、ここまでにしてください。上記の紹介を読んだ後は、React についてより深く理解できると思います

さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

vue を使用してログイン検証を実装する方法

Vue のカスタム命令を使用してドロップダウン メニューを完成させる方法

jQuery を使用して配列の重複を除去し並べ替える

以上がReact を使用して TodoList を実装する詳細な手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。