React技巧7(TodoList实现3组件之间传递数据之优化)

时间:2022-05-08
本文章向大家介绍React技巧7(TodoList实现3组件之间传递数据之优化),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

本教程总共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;

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

我们看下浏览器效果!

一切正常!