本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!
1.React 技巧1(状态组件与无状态组件的使用) ----2018.01.04
2.React 技巧2(避免无意义的父节点)----2018.01.05
3.React 技巧3(如何优雅的渲染一个List)----2018.01.06
4.React 技巧4(如何处理List里面的Item)----2018.01.07
5.React 技巧5(TodoList实现)----2018.01.08
6.React技巧6(TodoList实现2组件之间传递数据)---2018.01.09(新增)
7.React技巧7(TodoList实现3组件之间传递数据之优化)---2018.01.10(新增)
开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2
这节课,我们来优化一下上节课的代码!其中有几个地方,代码写的有点重复!
handleItemDel(id) {
let list = this.state.list;
list.find(data => data.id === id).status = 0;
this.setState({list: list})
}
handleItemRecovery(id) {
let list = this.state.list;
list.find(data => data.id === id).status = 1;
this.setState({list: list})
}
其中这两段代码就是很重复,我们重构下:
handleItemEdit(id, type) {
let list = this.state.list;
list.find(data => data.id === id).status = type;
this.setState({list: list})
}
我们看下这个List.jsx组件,是不是感觉页有很多重复代码?
我们把List.jsx组件也重构下!
import React from 'react';
const LiCont = ({data, list, handleItemEdit, type}) =>
<li>
{data.title}
<button onClick={() => handleItemEdit(data.id, data.status === 1 ? 0 : 1)}
className={data.status === 1 ? "del" : "recovery"}>
{data.status === 1 ? "删除" : "恢复"}
</button>
</li>
;
const List = props =>
<div className="list">
{
props.list.map(data => [
props.type === 0 ?
<LiCont data={data} {...props} key={data.id}/>
:
props.type === 1 && data.status === 1 ?
<LiCont data={data} {...props} key={data.id}/>
:
props.type === 2 && data.status === 0 ?
<LiCont data={data} {...props} key={data.id}/>
:
null
]
)
}
</div>
;
export default List;
TodoList.jsx 完整代码
import React from 'react';
import List from './List';
import '../../../public/css/todoList.pcss';
class TodoList extends React.Component {
constructor(props) {
super(props);
this.state = {
list: []
};
this.handleAdd = this.handleAdd.bind(this);
this.handleItemEdit = this.handleItemEdit.bind(this);
}
handleAdd() {
let item = this.refs['todoInput'].value;
if (item) {
let list = this.state.list;
list.push({id: list.length + 1, title: item, status: 1});
this.setState({list: list}, () => console.log(this.state.list))
} else {
alert('不能为空')
}
}
handleItemEdit(id, status) {
let list = this.state.list;
list.find(data => data.id === id).status = status;
this.setState({list: list})
}
componentDidMount() {
}
render() {
let {list} = this.state;
return (
<div className="todoList">
<input type="text" ref="todoInput"/>
<button onClick={this.handleAdd}>添加</button>
<div className="cont">
<div className="box">
全部
<List list={list} handleItemEdit={this.handleItemEdit} type={0}/>
</div>
<div className="box">
未删除
<List list={list} handleItemEdit={this.handleItemEdit} type={1}/>
</div>
<div className="box">
已删除
<List list={list} handleItemEdit={this.handleItemEdit} type={2}/>
</div>
</div>
</div>
);
}
}
export default TodoList;
这种写法,虽然省略了一些代码,但是可读性可能会差点,理解起来,新手可能有点困难!又多了一个子组件,大家发现没有祖孙组件,甚至更多层级的组件,我们都要把状态,方法层层传递,讲这节课是为了之后的状态管理器做铺垫!
我们看下浏览器效果!
一切正常!