這次帶給大家的是用React實作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一定會有更近一步的理解
相信看了以上介紹你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
如何用vue實作登入驗證
#怎麼使用Vue的自訂指令完成下拉式選單
用jQuery做出對陣列去重及排序的運算
以上是用React實作TodoList的詳細步驟的詳細內容。更多資訊請關注PHP中文網其他相關文章！
