使用Typescript+React hooks实现滑动点赞的组件

自从React推出hooks后，函数式组件好像可以配合hooks做任何事了，不用class component也能实现各种功能了，而且这种模式更加灵活，更易于拆分与封装。一番体验下来，充分意识到，函数式编程+hooks才是React的王道。今天我们就来使用hooks来实现一下滑动列表项显示点赞按钮的功能。页面如下所示：

梳理一下功能：滑动列表条目时，左滑显示点赞按钮，并且关掉其他条目的按钮显示；右滑，关掉当前条目的点赞按钮展示。

其实这个功能实现起来没有什么难度，只是给列表条目绑定touchmove事件，左滑的时候，添加样式，使条目左移，显示出点赞按钮。我们直接上代码看看：

// index.tsx
import React from 'react';
import './index.less';
import { newsItem } from '../../types';
import useSwipe from '../../hooks/useSwiper';

const newsListData = [
    {
        id: 1,
        title: '菲律宾多位学者发起网上请愿',
        src: 'pic.png',
        abstract: '菲律宾多位学者5日发起网上请愿活动，希望收集足够多的签名。',
        releaseDate: '2021-08-06 15:42',
        like: false,
    },
    {
        id: 2,
        title: '引导粉丝文化步入健康轨道',
        src: 'pic1.png',
        abstract:'各相关方都要负起社会责任，坚持正确导向，自觉做社会正能量的放大器',
        releaseDate: '08-05 06:30',
        like: false,
    },
];

function SwiperItem({
    title,
    src,
    abstract,
    releaseDate,
    isCurrent,
    like,
    swipeEventHandler,
    likeEventHandler,
}: newsItem) {
    return (
        <div className="swiper-list-item" {...swipeEventHandler}>
            <div
                className={[
                    'item-content-wrap',
                    isCurrent ? 'swiper-left' : '',
                ].join(' ')}
            >
                <img className="news-pic" src={src} alt={title} />
                <div className="item-right-content">
                    <p className="news-title">{title}</p>
                    <p className="news-abstract">{abstract}</p>
                    <p className="news-publish-date">发布时间：{releaseDate}</p>
                </div>
            </div>
            <div className="like-btn" {...likeEventHandler}>
                {like ? '取消' : '点赞'}
            </div>
        </div>
    );
}

export default function SwiperList() {
    const { swipeList, createSwipeProps, createLikeProps } = useSwipe(newsListData);
    return (
        <div className="swiper-list-cpn">
            {swipeList.map((item) => (
                <SwiperItem
                    key={item.id}
                    {...{
                        ...item,
                        ...createSwipeProps(item.id),
                        ...createLikeProps(item.id),
                    }}
                />
            ))}
        </div>
    );
}

// useSwipe.ts
import { useState } from 'react';
import { newsItem } from '../types';

function setSwipeLeftList(list: Array<newsItem>, id: number): Array<newsItem> {
    return list.map((item) => ({
        ...item,
        isCurrent: item.id === id,
    }));
}

function setSwipeRightList(list: Array<newsItem>): Array<newsItem> {
    return list.map((item) => ({
        ...item,
        isCurrent: false,
    }));
}

function setLikeList(list: Array<newsItem>, id: number): Array<newsItem> {
    return list.map((item) => ({
        ...item,
        like: item.id === id ? !item.like : item.like,
    }));
}

export default function useSwipe(list: Array<newsItem>) {
    const [swipeList, setSwipeList] = useState(list);
    const [preId, setPreId] = useState(-1);
    const [startX, setStartX] = useState(0);

    return {
        swipeList,
        createSwipeProps: (id: number) => {
            return {
                swipeEventHandler: {
                    onTouchStart: (e: React.TouchEvent) => {
                        // 滑动初始位置
                        setStartX(e.targetTouches[0].clientX);
                    },
                    onTouchEnd: (e: React.TouchEvent) => {
                        const endX = e.changedTouches[0].clientX;
                        const deltaX = startX - endX;
                        if (deltaX > 50) {
                            // 左滑
                            if (id === preId) return;
                            setSwipeList(setSwipeLeftList(swipeList, id));
                            setPreId(id);
                        } else if (deltaX < -50) {
                            // 右滑
                            if (id !== preId) return;
                            setSwipeList(setSwipeRightList(swipeList));
                            setPreId(-1);
                        }
                    },
                },
            };
        },
        createLikeProps: (id: number) => {
            return {
                likeEventHandler: {
                    onClick: () => {
                        setTimeout(() => {
                            setSwipeList(setLikeList(swipeList, id));
                        }, 100);
                    },
                },
            };
        },
    };
}

// index.less
.swiper-list-cpn {
    padding: 20px;
    .swiper-list-item {
        position: relative;
        height: 140px;
        margin-bottom: 20px;
        border-radius: 4px;
        overflow: hidden;
        box-shadow: 2px 2px 5px grey;
        .item-content-wrap {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
            display: flex;
            align-items: center;
            height: 100%;
            box-sizing: border-box;
            padding: 10px 20px;
            background: #fff;
            transition: transform 0.3s ease-in;
            &.swiper-left {
                transform: translateX(-60px);
            }
            .news-pic {
                width: 80px;
                margin-right: 20px;
            }
            .item-right-content {
                flex: 1;
                .news-title {
                    margin-bottom: 10px;
                    font-size: 16px;
                    font-weight: bold;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .news-abstract {
                    margin-bottom: 10px;
                    font-size: 14px;
                }
                .news-publish-date {
                    font-size: 12px;
                    color: grey;
                }
            }
        }
        .like-btn {
            position: absolute;
            right: 0;
            top: 0;
            width: 60px;
            line-height: 140px;
            text-align: center;
            background: rgb(255, 66, 66);
        }
    }
}

看代码的结构的话，我把整个逻辑层抽离出来一个自定义hook，这个hook很简单，我的列表是根据列表的数据渲染出来的，所以其实我只需要跟列表的数据打交道就行了，不管是左滑右滑还是点赞取消点赞，都只是改变列表的数据内容，改变后再渲染到页面上。Hooks很强大，也很灵活，这既是优点也是缺点，如果你能很好进行模块的拆解与封装，那么代码的可读性和可维护性会很高，反之，简单的怼hooks，后期维护将是灾难。