本教程总共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;
这种写法,虽然省略了一些代码,但是可读性可能会差点,理解起来,新手可能有点困难!又多了一个子组件,大家发现没有祖孙组件,甚至更多层级的组件,我们都要把状态,方法层层传递,讲这节课是为了之后的状态管理器做铺垫!
我们看下浏览器效果!
一切正常!
本文完
禁止擅自转载,如需转载请在公众号中留言联系我们!
感谢童鞋们支持!
如果你有什么问题,可以在下方留言给我们!