React技巧7

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

这节课，我们来优化一下上节课的代码！其中有几个地方，代码写的有点重复！

其中这两段代码就是很重复，我们重构下：

我们看下这个List.jsx组件，是不是感觉页有很多重复代码？

我们把List.jsx组件也重构下！

importReactfrom'react';

constLiCont= () =>

handleItemEdit(data.id,data.status===1?:1)}

className=>

;

constList= props =>

{

props.list.map(data => [

props.type===?

:

props.type===1&& data.status===1?

:

props.type===2&& data.status===?

:

null

]

)

}

;

export defaultList;

TodoList.jsx 完整代码

importReactfrom'react';

importListfrom'./List';

import'../../../public/css/todoList.pcss';

classTodoListextendsReact.Component {

constructor(props) {

super(props);

this.state= {

list: []

};

this.handleAdd=this.handleAdd.bind(this);

this.handleItemEdit=this.handleItemEdit.bind(this);

}

handleAdd() {

letitem =this.refs['todoInput'].value;

if(item) {

letlist =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) {

letlist =this.state.list;

list.find(data => data.id=== id).status= status;

this.setState({list: list})

}

componentDidMount() {

}

render() {

let=this.state;

return(

添加

全部

未删除

已删除

);

}

}

export defaultTodoList;

这种写法，虽然省略了一些代码，但是可读性可能会差点，理解起来，新手可能有点困难！又多了一个子组件，大家发现没有祖孙组件，甚至更多层级的组件，我们都要把状态，方法层层传递，讲这节课是为了之后的状态管理器做铺垫！

我们看下浏览器效果！

一切正常！

本文完

禁止擅自转载,如需转载请在公众号中留言联系我们!

感谢童鞋们支持!

如果你有什么问题,可以在下方留言给我们!