用React實(shí)現(xiàn)一個完整的TodoList的示例代碼
前言:算起來已經(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)組件的劃分
- TodoList整體作為一個大組件;
- 列表中的每個列表項(xiàng)(ListItem)作為一個組件;
- 任務(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)菜譜軟件的實(shí)現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2021-09-09React實(shí)現(xiàn)動態(tài)輪播圖的使用示例
輪播組件是常見的一種方式,用來展示圖像、信息或者是廣告,本文就來介紹一下React實(shí)現(xiàn)動態(tài)輪播圖的使用示例,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12react+antd.3x實(shí)現(xiàn)ip輸入框
這篇文章主要為大家詳細(xì)介紹了react+antd.3x實(shí)現(xiàn)ip輸入框,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10React利用插件和不用插件實(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-07React?Refs?的使用forwardRef?源碼示例解析
這篇文章主要為大家介紹了React?之?Refs?的使用和?forwardRef?的源碼解讀,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11