收藏本站 收藏本站
積木網首頁 - 軟件測試 - 常用手冊 - 站長工具 - 技術社區
首頁 > JavaScript > JavaScript技巧 > 正文

首頁 - PHP - 數據庫 - 操作系統 - 游戲開發 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell編程 - DOS命令 - jQuery - CSS樣式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

用React實現一個完整的TodoList的示例代碼

前言:算起來已經有一個多月沒有寫博客了,近來懈怠了不少,也不知道要寫些什么,最近學了一段時間的React,一直都在看些理論性的知識,總覺得應該寫個什么來練練手,所以還是拿個簡單的todoList來舉個例子吧!

一. 首先根據效果圖講一下要實現的功能吧

查看圖片

todoList最終效果圖

(1)可以添加任務;
(2)已完成任務以及未完成任務的顏色區分開;
(3)進行添加任務,修改任務狀態,以及刪除任務時,下面的任務完成數目和任務總數要進行變化;

以上就是要實現的功能。

二. 接下來該如何設計呢?

(1)任務存儲的數據結構:

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

每個任務都有自己的id,任務名,以及任務的狀態,任務的id除了標識任務的唯一性,還可以作為列表項的key值。我們都知道在react中使用列表,列表的每一項必須有個key值,這樣會使得每個列表項可以快速定位,在執行Diff算法時減少不必要的查詢,從而對性能的提升有所幫助。

(2)組件的劃分

TodoList整體作為一個大組件; 列表中的每個列表項(ListItem)作為一個組件; 任務的添加框(Dialog)作為一組件。

三. 具體實現

以列表項ListItem的實現為例:

將列表項單獨劃分為一個組件是必須的,這樣使得每個單獨的條目都是獨立的,使得代碼的邏輯更加簡單,增強代碼的復用性,維護也會變得更簡單。

當然聰明的你肯定會想到一個問題:每一個Task的狀態改變或者Task的添加刪除,Task的完成數目和總數目都是會改變的,可是每個ListItem都是相互獨立的,如何實現呢?這時就要用到父子組件之間的通信了。

如果你也是和我一樣React的初學者,百度一下就會出現很多文章都會講父子組件間如何通信,下面我簡單說一下自己簡單粗暴的理解:

在父子組件中定義改變state數據的方法,將方法以props的形式傳遞給子組件,在子組件中觸發事件處理程序,然后滿足某種條件的話就執行父組件傳來的函數。

具體代碼如下:

父組件中的代碼:

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 ? '#fff' : '#A1EAFB'}}
        ></span>
        <span>{ item.name }</span>
        <span onClick={this.handleDelete} className="delete-btn">刪除</span>
      </li>
    );
  }
}

export default ListItem;

以上是對這個小練習的一個總結,如果你也和我一樣是個react新手的話,寫完這個相信你對React一定會有更近一步的理解,小練習以上傳至github,可以進行參考哦!希望對大家的學習有所幫助,也希望大家多多支持積木網。

ES6 javascript中class靜態方法、屬性與實例屬性用法示例
本文實例講述了ES6javascript中class靜態方法、屬性與實例屬性用法。分享給大家供大家參考,具體如下:類相當于實例的原型,所有在類中定義的方法,

原生JS與jQuery編寫簡單選項卡
本文實例為大家分享了JS編寫簡單選項卡的具體代碼,供大家參考,具體內容如下!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"titlejquery選項卡/titlestyletype="text/css

ES6 javascript中class類的get與set用法實例分析
本文實例講述了ES6javascript中class類的get與set用法。分享給大家供大家參考,具體如下:與ES5一樣,在Class內部可以使用get和set關鍵字,對某個屬性設置存

本周排行

更新排行

強悍的草根IT技術社區,這里應該有您想要的! 友情鏈接:b2b電子商務
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP備05050695號
时时彩免费分析软件