微信公众号首发
本教程总共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 Reactfrom 'react';
const LiCont = ({data, list, handleItemEdit, type}) =>
{data.title}
handleItemEdit(data.id, data.status ===1 ?0 :1)}
className={data.status ===1 ?"del" :"recovery"}>
{data.status ===1 ?"删除" :"恢复"}
;
const List = props =>
{
props.list.map(data => [
props.type ===0 ?
:
props.type ===1 && data.status ===1 ?
:
props.type ===2 && data.status ===0 ?
:
null
]
)
}
;
export default List;
TodoList.jsx 完整代码
import Reactfrom 'react';
import List from './List';
import '../../../public/css/todoList.pcss';
class TodoListextends 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 (
添加
全部
未删除
已删除
);
}
}
export default TodoList;
这种写法，虽然省略了一些代码，但是可读性可能会差点，理解起来，新手可能有点困难！又多了一个子组件，大家发现没有祖孙组件，甚至更多层级的组件，我们都要把状态，方法层层传递，讲这节课是为了之后的状态管理器做铺垫！
我们看下浏览器效果！
一切正常！
本文完
禁止擅自转载,如需转载请在公众号中留言联系我们!
感谢童鞋们支持!
如果你有什么问题,可以在下方留言给我们!
网友评论