欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

用React實(shí)現(xiàn)一個完整的TodoList的示例代碼

 更新時(shí)間:2017年10月30日 08:55:20   作者:簡心豆  
本篇文章主要介紹了用React實(shí)現(xiàn)一個完整的TodoList的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

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

一. 首先根據(jù)效果圖講一下要實(shí)現(xiàn)的功能吧

todoList最終效果圖

(1)可以添加任務(wù);
(2)已完成任務(wù)以及未完成任務(wù)的顏色區(qū)分開;
(3)進(jìn)行添加任務(wù),修改任務(wù)狀態(tài),以及刪除任務(wù)時(shí),下面的任務(wù)完成數(shù)目和任務(wù)總數(shù)要進(jìn)行變化;

以上就是要實(shí)現(xiàn)的功能。

二. 接下來該如何設(shè)計(jì)呢?

(1)任務(wù)存儲的數(shù)據(jù)結(jié)構(gòu):

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

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

(2)組件的劃分

  1. TodoList整體作為一個大組件;
  2. 列表中的每個列表項(xiàng)(ListItem)作為一個組件;
  3. 任務(wù)的添加框(Dialog)作為一組件。

三. 具體實(shí)現(xiàn)

以列表項(xiàng)ListItem的實(shí)現(xiàn)為例:

將列表項(xiàng)單獨(dú)劃分為一個組件是必須的,這樣使得每個單獨(dú)的條目都是獨(dú)立的,使得代碼的邏輯更加簡單,增強(qiáng)代碼的復(fù)用性,維護(hù)也會變得更簡單。

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

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

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

具體代碼如下:

父組件中的代碼:

import React, { Component } from 'react';
import ListItem from './listItem';
import Dialog from './dialog';
import './main.css';

class TodoList extends Component {
  constructor (props) {
    super(props);
    
    //初始任務(wù)列表
    this.state = {
      list: [{
        id: 0,
        name: '吃飯',
        status: 0
      }, {
        id: 1,
        name: '睡覺',
        status: 0
      }, {
        id: 2,
        name: '打豆豆',
        status : 0
      }],
      finished: 0
    };
  }
  
  //添加新任務(wù),在組件中以props的形式傳遞給子組件
  addTask (newitem) {
    var allTask = this.state.list;
    allTask.push(newitem);
    this.setState({
      list: allTask
    });
  }
  //更新完成的任務(wù),在組件中以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
    });
  }

  //更新任務(wù)總數(shù),在組件中以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}總數(shù)</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); //執(zhí)行父組件傳來的方法
  }

  handleDelete () {
    this.props.totalChange(this.props.item); //執(zhí)行父組件傳來的方法
  }

  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;

以上是對這個小練習(xí)的一個總結(jié),如果你也和我一樣是個react新手的話,寫完這個相信你對React一定會有更近一步的理解,小練習(xí)以上傳至github,可以進(jìn)行參考哦!希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 一篇文章教你用React實(shí)現(xiàn)菜譜系統(tǒng)

    一篇文章教你用React實(shí)現(xiàn)菜譜系統(tǒng)

    本篇文章主要介紹了React實(shí)現(xiàn)菜譜軟件的實(shí)現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2021-09-09
  • React實(shí)現(xiàn)動態(tài)輪播圖的使用示例

    React實(shí)現(xiàn)動態(tài)輪播圖的使用示例

    輪播組件是常見的一種方式,用來展示圖像、信息或者是廣告,本文就來介紹一下React實(shí)現(xiàn)動態(tài)輪播圖的使用示例,具有一定的參考價(jià)值,感興趣的可以了解一下
    2023-12-12
  • React中關(guān)于render()的用法及說明

    React中關(guān)于render()的用法及說明

    這篇文章主要介紹了React中關(guān)于render()的用法及說明,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-02-02
  • react如何添加less環(huán)境配置

    react如何添加less環(huán)境配置

    這篇文章主要介紹了react如何添加less環(huán)境配置,本文給大家分享遇到問題及解決方案,結(jié)合示例代碼圖文給大家介紹的非常詳細(xì),需要的朋友參考下吧
    2022-05-05
  • react+antd.3x實(shí)現(xiàn)ip輸入框

    react+antd.3x實(shí)現(xiàn)ip輸入框

    這篇文章主要為大家詳細(xì)介紹了react+antd.3x實(shí)現(xiàn)ip輸入框,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-10-10
  • React利用插件和不用插件實(shí)現(xiàn)雙向綁定的方法詳解

    React利用插件和不用插件實(shí)現(xiàn)雙向綁定的方法詳解

    我們知道在 angular 中數(shù)據(jù)時(shí)雙向綁定的;而在 react 中,數(shù)據(jù)是向一個方向傳遞:從擁有者到子節(jié)點(diǎn)。也就是我們說的單向數(shù)據(jù)綁定。那如何實(shí)現(xiàn)雙向綁定呢?下面這篇文章主要給大家介紹了關(guān)于React利用插件和不用插件實(shí)現(xiàn)雙向綁定的方法,需要的朋友可以參考下。
    2017-07-07
  • React路由攔截模式及withRouter示例詳解

    React路由攔截模式及withRouter示例詳解

    這篇文章主要為大家介紹了React路由攔截模式及withRouter示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-08-08
  • React Hooks常用場景的使用(小結(jié))

    React Hooks常用場景的使用(小結(jié))

    這篇文章主要介紹了React Hooks常用場景的使用,根據(jù)使用場景分別進(jìn)行舉例說明,幫助你認(rèn)識理解并可以熟練運(yùn)用 React Hooks 大部分特性,感興趣的可以了解一下
    2021-04-04
  • React?Refs?的使用forwardRef?源碼示例解析

    React?Refs?的使用forwardRef?源碼示例解析

    這篇文章主要為大家介紹了React?之?Refs?的使用和?forwardRef?的源碼解讀,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-11-11
  • 關(guān)于react useState更新異步問題

    關(guān)于react useState更新異步問題

    這篇文章主要介紹了關(guān)于react useState更新異步問題,具有很好的參考價(jià)值,希望對大家有所幫助。以上為個人經(jīng)驗(yàn),希望能給大家一個參考,也希望大家多多支持腳本之家。

    2022-08-08

最新評論